Drag tüm pencerede çalışıyor, ancak ben sadece bu işlevin sadece div tarafından çalışılmasını istiyorum

Question

Id ile id adını sürüklemek istiyorum id = id = "dragme" Bunu nasıl yapabilirim. Ve eğer mümkünse sürüklenen div dragme div adı sınırının dışına çıkmak zorunda kalmamalıdır.

<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>

İsterseniz

Answer 2

jQuery UI sürüklenebilir en containment seçeneğini kullanmak olacaktır Bunu yapmanın en kolay yolu:

$(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

kodunuz için jQuery Draggable Widget + containment seçeneğini kullanarak Çözüm:

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

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