自定义拖放功能无法完美运行

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>