如何在onclick上拖動可拖動的div？

我有一個元素需要拖放（Jquery UI droppable）div同時拖放（完美），但我需要刪除相同的元素，而點擊它。如何在onclick上拖動可拖動的div？

我之所以需要上述功能的原因是：當使用單獨的代碼克隆並在onclick時將元素追加到droppable div時，代碼得到重複。我需要爲兩者使用相同的代碼。如何將onclicked元素（可拖動元素）傳遞到放置函數。？在Jsfiddle..!

來源

2016-07-22 ArunValaven

你能否詳細說明。所以你不想拖放功能？點擊可拖動，它應該放入droppable？ –

@呦呦..我用拖拽，並onclick追加元素放入div。我使用下拉的div進行調整大小，旋轉，就像droppable div中的各種功能一樣，所以當我使用onclick的單獨函數時，這些代碼會重複。 – ArunValaven

好的，看到我的答案！ –

$(document).ready(function() 
{ 
    var cloned_element; 

    $("#draggable").draggable({ 
     helper: 'clone', 
     revert: true 
    }); 

    $("#droppable").droppable(
    { 
     drop: function(event, ui) 
     { 
      cloned_element = $(ui.helper).clone(); 
      ui.helper.remove(); 
      cloned_element.appendTo(this); 

      $(this).addClass("ui-state-highlight").find("p").html("Dropped!"); 
     } 
    }); 

    $('#draggable').on('click',function() 
    { 
     $(this).trigger("drop", $('#droppable')); 
    });  
});

示例代碼我不認爲你可以在點擊觸發拖放功能。但是你可以爲你的第二個查詢做這樣的事情

$('#draggable').on('click',function() 
     { 
      cloned_element = $("#draggable").clone(); 
      cloned_element.attr("id","").css("position","absolute"); 
      cloned_element.find("p").html("Dropped!"); 
      cloned_element.appendTo("#droppable"); 
     });

Working demo

Demo。 - 如何將resizable（）分配給所有被拖放的元素。

來源

2016-07-22 11:23:39

@呦呦...我不需要這個單獨的功能。我有這個代碼。當我使用Jquery UI可調整大小或其他功能克隆的元素時，我需要重複拖放和onclicked函數的代碼。你能明白我需要什麼..？請幫助我 – ArunValaven

@呦呦..或任何其他方式將onclicked元素傳遞到放置函數..？ – ArunValaven

@ArunValaven：你的問題是**如何在onclick上拖動可拖動的div？**我回答。好吧，我也會嘗試修復這個問題 –

如何在onclick上拖動可拖動的div？

回答

相關問題