Получить продолжает координаты от элемента drop при наведении на него перетаскиваемого элемента

Question

Привет, ребята, мне нужно получить непрерывные координаты элемента, на котором я держу элемент draggable! Как и mousemove, который дает непрерывные координаты, но при перетаскивании mousemove не срабатывает на элементе droppable. Поэтому я опробовал over из droppable, который дает координаты только один раз. Так есть ли другой способ получить x,y непрерывно на элементе, где я держу элемент draggable над ним !!!

over: function (event, ui) {
                var x = event.clientX, y = event.clientY, DOM_ELEM_COORD = event.target.getBoundingClientRect(),
                placeHolder = wf_template.TEMPLATE_UTILITIES.DRAGDROP_API.placeholder.clone(); firstMove = false;
                $(placeHolder).mousemove(function (event) {
                    if ((event.clientY > (event.target.getBoundingClientRect().y + (event.target.getBoundingClientRect().height * (.20)))) || 
                        (event.clientY < ((event.target.getBoundingClientRect().y + (event.target.getBoundingClientRect().height * (.80))))))
                        event.target.remove();
                });
                console.log(event.clientX, event.clientY);
                var upper_Limit = DOM_ELEM_COORD.height * (.20), droppable_Limit = DOM_ELEM_COORD.height * (.60), lower_Limit = DOM_ELEM_COORD.height * (.80);                
                if (y < (DOM_ELEM_COORD.y + upper_Limit)) {
                    $(".draggable-placeholder").remove();
                    $(event.target).hasClass("workflow-info-row info-row-child") == true ? event.target.before(placeHolder[0]) : false;
                    firstMove = true;
                    console.log("top");
                } else if (y > (DOM_ELEM_COORD.y + upper_Limit) && y < (DOM_ELEM_COORD.y + droppable_Limit)) {
                    $(".draggable-placeholder").remove();
                    firstMove = false;
                    console.log("middle");
                } else if (y > (DOM_ELEM_COORD.y + lower_Limit)) {
                    $(".draggable-placeholder").remove();
                    $(event.target).hasClass("workflow-info-row info-row-child") == true ? event.target.after(placeHolder[0]) : false;
                    firstMove = false;
                    console.log("end");
                }
            },

Answer 1

Трудно привести пример с предоставленным вами ограниченным кодом. Так как Draggable знает положение перетаскивания, его легко использовать, чтобы собрать детали, которые вы ищете. Звучит так, будто они нужны вам только тогда, когда элемент находится поверх элемента сброса, поэтому мы можем сохранить флаг, используя .data() на помощнике, и сообщить подробности любой необходимой функции.

$(function() {
  $("#draggable").draggable({
    start: function(event, ui) {
      ui.helper.data("start-pos", ui.position);
      ui.helper.data("record", false);
    },
    drag: function(event, ui) {
      if (ui.helper.data("record")) {
        var pos = ui.position;
        var off = ui.offset;
        var ev = [
          event.clientX,
          event.clientY
        ];
        $("#log").html("<label>P:</label>[" + pos.left + "," + pos.top + "]<br /><label>O:</label>[" + off.left + "," + off.top + "]<br /><label>E:</label>[" + ev[0] + "," + ev[1] + "]");
      }
    }
  });
  $("#droppable").droppable({
    drop: function(event, ui) {
      $(this)
        .addClass("ui-state-highlight")
        .find("p")
        .html("Dropped!");
    },
    over: function(event, ui) {
      ui.helper.data("record", true);
    },
    out: function(event, ui) {
      ui.helper.data("record", false);
    }
  });
});

#draggable {
  width: 100px;
  height: 100px;
  padding: 0.5em;
  float: left;
  margin: 10px 10px 10px 0;
}

#droppable {
  width: 150px;
  height: 150px;
  padding: 0.5em;
  float: left;
  margin: 10px;
}

#log {
  width: 120px;
  height: 3em;
  padding: 0.5em;
  float: left;
  margin: 10px;
  font-family: Courier, monospaced;
  font-size: .65em;
}

#log label {
display: inline-block;
width: 2em;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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 id="draggable" class="ui-widget-content">
  <p>Drag me to my target</p>
</div>

<div id="droppable" class="ui-widget-header">
  <p>Drop here</p>
</div>

<div id="log" class="ui-widget-content">&nbsp;</div>

Это очень простой пример, но этого должно быть достаточно, чтобы помочь прояснить ситуацию. Вы также можете использовать event для сбора информации о движении мыши таким же образом, если вы выберете. Я также настроил бы допуск в соответствии с вашими потребностями.

Надеюсь, это поможет.