<script src="../Scripts/jquery-1.7.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#draggable").draggable({
start: function (event, ui) {
// flag to indicate that we want to remove element on drag stop
ui.helper.removeMe = true;
},
stop: function (event, ui) {
// remove draggable if flag is still true
// which means it wasn't unset on drop into parent
// so dragging stopped outside of parent
if (ui.helper.removeMe) {
ui.helper.remove();
}
},
// move back if dropped into a droppable
revert: 'valid'
});
$("#droppable").droppable({
drop: function (event, ui) {
// unset removeMe flag as child is still inside parent
ui.helper.removeMe = false;
}
});
});
</script>
这是html
<div id="droppable" style="border: 1px">
<p id="draggable">
Drag me!</p>
</div>
答案 0 :(得分:2)
您需要jQuery UI Lib:http://jqueryui.com/demos/draggable/
答案 1 :(得分:0)
您需要包含jQuery UI(https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js)。
拖放功能仅包含在jQuery UI(或其他插件)中:http://jqueryui.com/
<script src="../Scripts/jquery-1.7.2.js" type="text/javascript"></script>
<!-- Include here like -->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<!-- That's it -->
<script type="text/javascript">
<!-- ... continue -->