通过 mouseover 事件添加的 Jquery droppable 没有看到 OVER 事件

发布于 2024-12-18 08:19:49 字数 794 浏览 3 评论 0原文

因为我可能有 1000 个（或更多）DIVS，所有这些都可以拖放到彼此上，所以我发现当页面加载完成时将 jquery .droppable 放在所有 DIV 上需要太长时间。因此，我尝试使用鼠标悬停功能将可放置项仅添加到用户实际尝试放置某些内容的那些 DIV 中。

这对于 drop 来说工作得很好：但是对于 over 来说却没有达到预期的效果：

这是代码片段

$('.nc').mouseover(function() { 
   $(this).droppable({
      tolerance: 'touch',

      over: function( event, ui ) { // do this .. highlight the div being dropped on // },

      out: function(event, ui) { // do this .. unhighlight the div being dropped on // },

      drop: function( event, ui ) { // do this .. handle the drop even  // }

   });
});

当我用 .nc 类拖放到任何 DIV 上时，drop 实际上工作得很好。但是，当我将项目拖到 DIV 上时，“上方”不起作用，除非我的鼠标在尝试在其上拖动某些内容之前已移至 DIV 上方。

注意，我知道我可以使用hoverClass来突出显示，但我需要在over事件中提供一些逻辑，以便它只在某些条件下突出显示。

我已经为此奋斗了很长时间，所以希望有人能提供帮助。谢谢。

原文

Because I may have a 1000 (or more) DIVS that all can be dragged and dropped onto one another, I found that putting the jquery .droppable on all the DIVs when the page finishes loading takes way too long. So, I have tried to use the mouseover function to add the droppable only to those DIVs that the user actually tries to drop something on.

This works fine for the drop: but does not act as expected for the over:

Here is a snippet of the code

$('.nc').mouseover(function() { 
   $(this).droppable({
      tolerance: 'touch',

      over: function( event, ui ) { // do this .. highlight the div being dropped on // },

      out: function(event, ui) { // do this .. unhighlight the div being dropped on // },

      drop: function( event, ui ) { // do this .. handle the drop even  // }

   });
});

When I drop onto any DIV with the .nc class, the drop actually works fine. However, the "over" does not work when I drag an item onto the DIV unless my mouse has gone over the DIV prior to trying to drag something on it.

Note, i know that I could use the hoverClass to highlight, but I need to provide some logic in the over event so that it only highlights under certain conditions.

I've been fighting this for a long time, so hope someone can help. Thanks.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

屋檐 2024-12-25 08:19:49

对于每一行，

  over: function( event, ui ) { // do this .. highlight the div being dropped on // },

  out: function(event, ui) { // do this .. unhighlight the div being dropped on // },

  drop: function( event, ui ) { // do this .. handle the drop even  // }

结尾的“}”被注释掉，因此它破坏了函数

$('.nc').mouseover(function() {
   $(this).droppable({
      tolerance: 'touch',

      over: function( event, ui ) {  },

      out: function(event, ui) {  },

      drop: function( event, ui ) { }

   });
});

For each of the lines

  over: function( event, ui ) { // do this .. highlight the div being dropped on // },

  out: function(event, ui) { // do this .. unhighlight the div being dropped on // },

  drop: function( event, ui ) { // do this .. handle the drop even  // }

the ending "}" is commented out so it breaks the function

$('.nc').mouseover(function() {
   $(this).droppable({
      tolerance: 'touch',

      over: function( event, ui ) {  },

      out: function(event, ui) {  },

      drop: function( event, ui ) { }

   });
});

回复收藏 0 原文

~没有更多了~