Question

我想拖动一个div并放在其父div中的任何位置。对于拖动，我使用css样式

draggable="true"

对于drop，我使用'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"。

＆＃13;

$(".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');        
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 3

我认为我从你试图做的问题中看出来的是限制拖动到.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>

自定义拖动＆amp;掉线不完美

3 个答案: