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来收集有关鼠标移动的详细信息。我还将配置tolerance来满足您的需求。

希望有帮助。

从拖放元素获取连续坐标，同时将可拖动元素悬停在其上方

1 个答案: