2013-03-14 54 views
0

我是新來的jQuery和UI ..奇怪jQuery UI的 - 拖放不能克隆

我無法理解整個拖&下降&克隆&保存到DOM對象與jQuery和jQuery UI的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/

什麼HAPP檢查在我的代碼中註冊? (其實我從互聯網來源..)

回答

0

helper: 'clone',它實際上是創建您的<div>元素的克隆。你可以在你最喜歡的DOM檢查器(Firebug,Chrome開發者工具或其他)中看到它。嘗試添加一些內容到你的元素,你會看到它。

如果你想看到它,即使克隆爲空,你也可以在.ui-draggable-dragging類中添加一些css(如背景顏色)。