拖動正在整個窗口上工作，但我希望它只能通過編號的div工作

Question

我想拖動ID爲ID =「dragme」的div如何操作。如果可能的話，拖動div dragme不應該在div名稱限制外面。

<script> 
$(document).ready(function() { 
    var $dragging = null; 

    $(document.body).on("mousemove", function(e) { 
     if ($dragging) { 
      $dragging.offset({ 
       top: e.pageY, 
       left: e.pageX 
      }); 
     } 
    }); 


    $(document.body).on("mousedown", document.getElementById("dragset"), function (e) { 
     $dragging = $(e.target); 
    }); 

    $(document.body).on("mouseup", function (e) { 
     $dragging = null; 
    }); 
}); 
</script> 
<div id="limits" style="background:#ccc; width:600px; height:600px;"> 
<div style="background:red; width:200px; height:200px;" id="dragme"></div> 
</div> 

Answer 1

var $dragging = null; 
 

 
$("#dragme").on("mousemove", function(e) { 
 
    if ($dragging) { 
 
    $dragging.offset({ 
 
     top: e.pageY - 100, //retract here 
 
     left: e.pageX - 100 //retract here 
 
    }); 
 
    } 
 
}); 
 

 

 
$(document.body).on("mousedown", document.getElementById("dragset"), function(e) { 
 
    $dragging = $(e.target); 
 
}); 
 

 
$(document.body).on("mouseup", function(e) { 
 
    $dragging = null; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="limits" style="background:#ccc; width:600px; height:600px;"> 
 
<div style="background:red; width:200px; height:200px;" id="dragme"></div>

如果你想用你的代碼只是收回一半的紅色框的高度和寬度，從這樣的偏移：

Answer 2

要做到這一點是使用jQuery UI的可拖動的containment選擇最簡單的方法：

$(function() { 
 
    $("#draggable").draggable({ 
 
    containment: '#container' 
 
    }); 
 
});

#container { 
 
    height: 300px; 
 
    border: 1px solid; 
 
} 
 
#draggable { 
 
    width: 150px; 
 
    height: 150px; 
 
    padding: 0.5em; 
 
}

<script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
 
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 

 
<div id="container"> 
 
    <div id="draggable" class="ui-widget-content"> 
 
    <p>Drag me around</p> 
 
    </div> 
 
</div>

Answer 3

使用jQuery Draggable Widget + containment選項代碼解決方案：

http://plnkr.co/edit/vqjuQ99YhxQYiiaXjZ32?p=preview

$(function(){ 
    $("#dragme").draggable({ 
    containment: "parent" 
    }); 
});