Как вызвать событие перетаскивания при перетаскивании элемента с jQuery UI? - PullRequest
Новая
       37

Как вызвать событие перетаскивания при перетаскивании элемента с jQuery UI?

0 голосов
/ 04 мая 2020

Я делаю огромный проект, который должен быть хорош с точки зрения производительности, как и любое программное обеспечение. Но я борюсь за перетаскивание объектов.

Позвольте мне начать с моего кода. Вот мой 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');
});

Пример кодов

Мне нужно вызвать Событие сбрасывания при наведении курсора во время перетаскивания объектов, поскольку на странице так много сбрасываемых объектов, и она потребляет большую часть ОЗУ с браузером, и страница падает.

1 Ответ

1 голос
/ 05 мая 2020

Вам нужно будет сделать уровень обнаружения столкновений. Событие 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>
...