拖放Jquery将对象拖放到框中_Jquery_Drag And Drop

拖放Jquery将对象拖放到框中

jquery

拖放Jquery将对象拖放到框中,jquery,drag-and-drop,Jquery,Drag And Drop,我正在做一个简单的拖放应用程序。但我想完成的是将对象（100px乘以100px）拖动到框中（500px乘以500px），当我把它放到框中时，当我再次拖动它时，它不应该超出框，但它只能在框的任何区域拖动这就是我迄今为止所尝试的： <!doctype html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <

我正在做一个简单的拖放应用程序。但我想完成的是将对象（100px乘以100px）拖动到框中（500px乘以500px），当我把它放到框中时，当我再次拖动它时，它不应该超出框，但它只能在框的任何区域拖动

这就是我迄今为止所尝试的：

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


#makeMeDraggable{宽度：100px；高度：100px；背景：绿色；}
#makeMeDropable{float:左；边距：50px；宽度：500px；高度：300px；边框：1px实心35; 999；}
美元（初始）；
函数init（）{
$（'#makeMeDraggable'）.draggable（）；
$（'makemedropable'）。可拖放（{
下降：扶手缆绳通风口
} );
}

但这不是我想要的。非常感谢您的帮助

使用Dragable（可拖动）选项，该选项在放置在可拖放设备上时激活：

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