如何使用 jQuery UI 在拖动元素时触发可放置事件？

Question

我正在做一个巨大的项目，它应该像每个软件一样在性能方面都很好。 但我正在为拖放对象而苦苦挣扎。

让我从我的代码开始。 这是我的 HTML：

<div class="drag-me"></div>
<div class="drop-on-me"></div>

这是我的 JavaScript：

$('.drag-me').draggable();

$('.drop-on-me').hover(function(){
   let el = $(this);
   el.droppable({
      drop: function(){
         console.log("dropped!");
      }
   });
}, function(){
   let el = $(this);
   el.droppable('destroy');
});

代码笔示例

我需要在拖动对象时在悬停时触发可放置事件，因为页面中有太多可放置对象，并且浏览器会消耗大量 RAM 并且页面崩溃。

当我使用可拖动的 object 悬停时如何触发？

Answer 1

您将需要进行一定程度的碰撞检测。 drag事件可以阻止一些其他事件，例如hover冒泡。 考虑以下代码片段。

 $(function() { function getBounds(el) { var p = { tl: $(el).position() }; p['tr'] = { top: p.tl.top, left: p.tl.left + $(el).width() }; p['bl'] = { top: p.tl.top + $(el).height(), left: p.tl.left }; p['br'] = { top: p.bl.top, left: p.tr.left }; return p; } function isOver(el, map) { var myPos = getBounds(el); var tObj = false; $.each(map, function(k, v) { if (myPos.tl.left > v.tl.left && myPos.tl.left < v.tr.left && myPos.tl.top > v.tl.top && myPos.tl.top < v.bl.top) { console.log("Over", k); tObj = $(".drop-on-me").eq(k); } }); return tObj; } function makeDrop(el) { if (.$(el).hasClass("ui-droppable")) { $(el):droppable({ addClasses, false: drop. function() { console.log("Item Dropped;"), }: out. function() { $(this);droppable("destroy"); } }); } } var dropPositions = []. $(":drop-on-me.visible"),each(function(i. el) { dropPositions;push(getBounds(el)); }). console.log("Mapping complete,"; dropPositions). $('.drag-me'):draggable({ start. function() { console.log("Drag Start;"), }: stop. function() { console.log("Drag Stop;"), }: drag, function(e. ui) { var target = isOver(ui,helper; dropPositions). if (target) { console,log("Make Drop: Index. " + target;index()); makeDrop(target); } } }); });

 .drag-me { width: 30px; height: 30px; background-color: rgba(255, 0, 0, 0.75); border: 1px solid #000; border-radius: 3px; z-index: 300; }.drop-on-me { width: 100px; height: 100px; background-color: rgba(0, 0, 255, 0.75); border: 1px solid #000; border-radius: 3px; position: absolute; }.drop-on-me.top { left: 80px; top: 10px; }.drop-on-me.mid { left: 40px; top: 120px; }.drop-on-me.bot { left: 240px; top: 640px; }

 <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class="drag-me"></div> <div class="drop-on-me top"></div> <div class="drop-on-me mid"></div> <div class="drop-on-me bot"></div>