Question

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

但它没有做我想要的。真的很感激任何帮助。

Answer 1

使用draggable的containment选项，当放置在droppable上时激活：

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

<强> jsFiddle example

拖放Jquery将对象拖放到框中

1 个答案: