拖放Jquery將對象拖放到框中

我在做一個簡單的拖放應用程序。但是我想要完成的是將對象（100像素×100像素）拖到框（500像素×500像素），而我把它放在框內，當我再次拖動它時，它不應該超出框，但它只能拖動在箱子的任何區域。拖放Jquery將對象拖放到框中

這是我到目前爲止已經試過：

<!doctype html> 
<html lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 
<link rel="stylesheet" type="text/css" href="style.css"> 
<style> 
#makeMeDraggable { width: 100px; height: 100px; background: green; } 
#makeMeDroppable { float: left; margin: 50px; width: 500px; height: 300px; border: 1px  solid #999; } 
</style> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script> 


<script type="text/javascript"> 

$(init); 
function init() { 
$('#makeMeDraggable').draggable(); 
$('#makeMeDroppable').droppable({ 
drop: handleDropEvent 
}); 
} 

</script> 

</head> 
<body> 

<div id="content" style="height: 400px;"> 

    <div id="makeMeDraggable"> </div> 
    <div id="makeMeDroppable"> </div> 

</div> 

</body> 
</html>

但它不這樣做我想要的。任何幫助是真正的讚賞。

來源

2013-06-03 neknek mouh

使用拖動的containment選項，當可放開激活下降：對我來說

$(init); 
function init() { 
    $('#makeMeDraggable').draggable(); 
    $('#makeMeDroppable').droppable({ 
     drop: function() { 
      $("#makeMeDraggable").draggable("option", "containment", "#makeMeDroppable"); 
     } 
    }); 
}

jsFiddle example

來源

2013-06-03 16:09:16 j08691

工程，抓好 –

拖放Jquery將對象拖放到框中

回答

相關問題