0

我正在做一个简单的拖放应用程序。但我想要完成的是将对象（100px x 100px）拖到框（500px x 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>

但它没有做我想要的。任何帮助都非常感谢。

4

1 回答 1

2

使用可拖动的包含选项，在放置在可放置对象上时激活：

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

jsFiddle 示例

于 2013-06-03T16:09:16.990 回答