0

我是 jQuery 和 UI 的新手。

我无法理解使用 jQuery 和 jQuery UI 的整个拖放、克隆和保存到 DOM 对象的数据库过程。

我遇到了一些奇怪的情况：

助手克隆根本不起作用。

使用以下代码，原始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>

甚至它是 “help:'clone'” 而不是 “helper:'clone'”

“助手：'克隆'”不起作用......

您可以在http://jsfiddle.net/JEdtX/6/查看

我的代码中发生了什么？（其实我是从网上找的..）

4

1 回答 1

0

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

.ui-draggable-dragging如果你想看到它，即使克隆是空的，你也可以在类中添加一些 css（如背景颜色） 。

于 2013-11-03T11:53:01.467 回答