Question

我是jQuery和UI的新手..

我无法理解整个拖累和掉落＆amp;克隆＆amp;使用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/

查看

我的代码中发生了什么？（实际上我是从互联网上获取来源的。）

Answer 1

使用helper: 'clone'，实际上是在创建<div>元素的克隆。您可以在自己喜欢的DOM检查器（Firebug，Chrome开发人员工具或其他任何工具）中查看它。尝试在元素中添加一些内容，您就会看到它。

如果要查看克隆是空的，可以向.ui-draggable-dragging类添加一些css（如背景颜色）。

奇怪的jQuery UI - 拖放不克隆

1 个答案: