將可拖動元素懸停在放置元素上時，從放置元素獲取繼續坐標

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 知道拖動位置，因此很容易使用它來收集您正在尋找的細節。 聽起來你只在項目位於 droppable 上時才需要它們，所以我們可以使用.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以相同的方式收集有關鼠標移動的詳細信息。 我也會配置容差以滿足您的需求。

希望有幫助。