我是jQuery和UI的新手..
我无法理解整个拖累和掉落&克隆&使用jQuery和jQuery UI保存到DOM对象的DB进程。
我遇到了一些奇怪的情况:
辅助克隆根本不起作用。
使用以下代码原始div
拖动,而不是克隆。
<!doctype html>
<html lang="en">
<head>
<style>
#makeMeDraggable { float: left; width: 100px; height: 100px; background: red; }
#makeMeDroppable { float: left; left: 0px; width: 300px; height: 300px; border: 1px solid #999; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript">
$( init );
function init() {
$('#makeMeDraggable').draggable( {
revert:"invalid",
help:'clone',
containment:"#makeMeDroppable"
});
$('#makeMeDroppable').droppable( {
drop: handleDropEvent
} );
}
function handleDropEvent( event, ui ) {
var draggable = ui.draggable;
// console.log( 'The square with ID "' + draggable.attr('id') + '" was dropped onto me!' );
}
</script>
</head>
<body>
<div id="content" style="height: 400px;">
<div id="makeMeDraggable"> </div>
<div id="makeMeDroppable"> </div>
</div>
</body>
</html>
即便如此 “帮助:'克隆'” 不 的 “助手: '克隆'”
“帮助:'克隆'”无效......
您可以在http://jsfiddle.net/JEdtX/6/
查看我的代码中发生了什么? (实际上我是从互联网上获取来源的。)
答案 0 :(得分:0)
使用helper: 'clone'
,实际上是在创建<div>
元素的克隆。您可以在自己喜欢的DOM检查器(Firebug,Chrome开发人员工具或其他任何工具)中查看它。尝试在元素中添加一些内容,您就会看到它。
如果要查看克隆是空的,可以向.ui-draggable-dragging
类添加一些css(如背景颜色)。