2011-11-16 86 views
2

我正在創建一個活動生成器創作工具。用戶使用右鍵單擊菜單可以選擇添加一些元素到頁面中,並且其中一些元素用文本填充。克隆jquery draggable也拖動它的原始版本

使用Jquery UI,所有元素都是可拖動的,有些可調整大小。我希望用戶能夠製作一個元素的精確副本,但是當我使用克隆功能時,我會得到奇怪的結果。我可以將原件從克隆中拖出來,但是當我嘗試拖動克隆時,它只是拖動原件並保持原位。

繼承人我的代碼

function addobject (element_type){ 
     $('#activitystage').append($("<div class=\"draggable " + element_type + "\" id=\"" + counter + "\"></div>")); 
     $("#" + counter).multidraggable({ containment: "#activitystage", grid: [10, 10],drag: function(event,ui){ showpositions(); }}); 
     $('#' + counter).contextMenu({menu: 'functionsMenu' }, function(action, el, pos) {run(action, el); }); 
     $('#' + counter).append("<textarea class=\"" + element_type + "\"></textarea>"); 
    } 

    function run (action, el){ 
     switch (action){ 
      case "clone": 
       $(el).clone(true).attr('id', 'some new id').appendTo('#activitystage'); 
       break; 
} 
+0

你試圖reaply對克隆DIV的multidraggable功能? – max4ever

+0

你使用的是什麼版本的jQuery? –

+0

另外,如果「計數器」是一個數字,那麼你似乎有無效的HTML。 ID不能以數字開頭。 –

回答

0

你的問題,我能想到的就是使用克隆(假的),並重新綁定拖放事件的最簡單的解決。

試試這個代碼

var attr = { containment: "#activitystage", grid: [10, 10],drag: function(event,ui){ showpositions(); }}; 

function addobject (element_type){ 
    $('#activitystage').append($("<div class=\"draggable " + element_type + "\" id=\"" + counter + "\"></div>")); 
    $("#" + counter).multidraggable(attr); 
    $('#' + counter).contextMenu({menu: 'functionsMenu' }, function(action, el, pos) {run(action, el); }); 
    $('#' + counter).append("<textarea class=\"" + element_type + "\"></textarea>"); 
} 

    function run (action, el){ 
     switch (action){ 
      case "clone": 
       $(el).clone(false).attr('id', 'some new id').appendTo('#activitystage').multidraggable(attr); 
       break; 
}