自定義拖放功能無法完美運行

Question

我想將div拖放到其父div中的任何位置。 對於拖動，我使用css樣式

draggable="true"

對於放置，我使用'mousemove'事件X和Y值並將此值用於div的top和left。我使用的代碼是

 $(".drop").mousedown(function () { $(this).mousemove(function (e) { var k = e.clientX ; var f = e.clientY; $(".drop").text(k+ ", " + f); $(".drop").css("top",f); $(".drop").css("left",k); }); }).mouseup(function () { $(this).unbind('mousemove'); }).mouseout(function () { $(this).unbind('mousemove'); }); 

 .drop{ position: absolute; left: 300; top: 200; /* set these so Chrome doesn't return 'auto' from getComputedStyle */ width: 200px; background: rgba(255,255,255,0.66); border: 2px solid rgba(0,0,0,0.5); border-radius: 4px; padding: 8px; z-index: 3; } .gridPart{ padding: 20px; background-color: #FFF; border-radius: 5px; margin: auto; margin: 20px; padding-right: 0px; padding-bottom: 3px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="gridpart"> <div class="drop" draggable="true" ></div> <div> 

現在，如果我以增加的左值進行拖動，則為拖放操作。 但是，如果我以減小的左值拖動，它不會下降。 如果拖動到達主div（GridPart）的末尾，如何停止拖動？

Answer 1

只需使用JQueryUi Draggable：

https://jqueryui.com/draggable/

更新：示例代碼在這里：

http://embed.plnkr.co/5W3ACU/

Answer 2

我已經修復了您的代碼。 您所做的一切都很好，但是您必須將mousemove事件與$(document)元素一起使用，而不要與div一起使用。 由於當您向后拖動時，鼠標移動會離開div，因此不再拖動。

另外，在使用自定義拖動時，不需要使用draggable="true" 。

 $(".drop").mousedown(function () { $(document).mousemove(function (e) { var k = e.clientX; var f = e.clientY; $(".drop").text(k+ ", " + f); $(".drop").css("top", f + 'px'); $(".drop").css("left", k + 'px'); }); }); $(document).mouseup(function () { $(document).unbind('mousemove'); }); 

 .drop{ position: absolute; left: 300; top: 200; /* set these so Chrome doesn't return 'auto' from getComputedStyle */ width: 200px; background: rgba(255,255,255,0.66); border: 2px solid rgba(0,0,0,0.5); border-radius: 4px; padding: 8px; z-index: 3; } .gridPart{ padding: 20px; background-color: #FFF; border-radius: 5px; margin: auto; margin: 20px; padding-right: 0px; padding-bottom: 3px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="gridpart"> <div class="drop" ></div> <div> 

Answer 3

我認為我已經從您要解決的問題.gridpart ，是將拖動限制在.gridpart div中。

關鍵是將拖動檢測移動到容器div，然后基於mousedown位置移動拖動組件

JSFIDDLE

JS

$(".gridpart").mousedown(function () {
    var containerDims = $(this)[0].getBoundingClientRect();
    var dropEl = $(this).find('.drop');
    // measure the size of the drop element
    var dropDims = dropEl[0].getBoundingClientRect()
    $(this).mousemove(function (e) {
        // position the element centered under the cursor
        var k = e.clientX - dropDims.width / 2;
        var f = e.clientY - dropDims.height / 2;
        if( k >= 0 && k <= containerDims.width - dropDims.width){
             dropEl.css("left",k);
        }
        if(f >= 0 && f <= containerDims.height - dropDims.height){
            dropEl.css("top", f);
        }
        dropEl.text(k + ', ' + f);
    });
 }).mouseup(function () {
    $(this).unbind('mousemove');
});

CSS

.drop{
    position:  absolute;
    left: 0;
    top: 20px;
    width: 200px; 
    background: rgba(255,255,255,0.66); 
    border: 2px  solid rgba(0,0,0,0.5); 
    border-radius: 4px; padding: 8px;
    z-index: 3;
    /* prevent 'shadow' drag preventing mouseup firing */
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}
.gridpart{ /* correct camelcase typo */
    background-color: #F00;
    border-radius: 5px;
    margin: 20px;
    padding-right: 0px;
    position: relative;
    height: 58px;
}

HTML

<div class="gridpart">  
    <div class="drop" draggable="true">0, 0</div>
<div>