奇怪的jQuery UI - 拖放不克隆

时间:2013-03-14 23:30:24

标签: jquery jquery-ui jquery-draggable

我是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/

查看

我的代码中发生了什么? (实际上我是从互联网上获取来源的。)

1 个答案:

答案 0 :(得分:0)

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

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