jQuery的投擲的GET拖動內容

我怎麼能複製拖動項HTML代碼來投擲的項目嗎？

我創建此與JQUERY教程

HTML：

<div id="draggable1" class="ui-widget-content"> 
     <div class="dragcontent1class" id="dragcontent1id"><div>drag 1 some html codes</div></div> 
</div> 
<div id="draggable1" class="ui-widget-content"> 
    <div class="dragcontent2class" id="dragcontent2id"><div>drag 2 some html codes</div></div> 
</div> 
<div id="droppable" class="ui-widget-header"> 
    <div class="dropclass" id="dropid"><div>drop here</div></div> 
</div>

和JQUERY：

<script> 
    $(".ui-widget-content").draggable({ revert: true }); 
    $("#droppable").droppable({ accept: ".ui-widget-content", 
     activeClass: "ui-state-hover", 
     hoverClass: "ui-state-active", 
     tolerance: "pointer" 
    }); 

    $("#droppable").on("drop", function (event, ui) { 
     $(this) 
    .addClass("ui-state-highlight") 
    .find("div") 
    .html("Droped"); 
    }); 

</script>

在DROP掉後那麼這個代碼

「DROP掉」在drob框顯示

但我如何顯示可拖動的項目子代碼

例如：如果draggable1項目DROP掉這麼dropb箱子代碼顯示此代碼：

<div class="dragcontent1class" id="dragcontent1id"><div>drag 1 some html codes</div></div>

遺憾的英語不好

來源

2014-01-05 Mohammad b

基本上，我們利用clone()來獲取對象的精確副本。

我已經爲你演示，檢查，如果這是什麼ü需要

演示：Fiddle

來源

2014-01-05 05:58:12 Ajey

但下降之後的示例不起作用：下拉框顯示DROP掉不顯示拖動項目的HTML代碼 –

我可拖動的元素是

$('.scp-el-draggable-row').draggable({ 
    helper: "clone", 
    cursor: "move", 
    opacity: 0.6, 
    revert: "invalid" 
});

使用下面的代碼，如果你需要添加自定義html

$('#main-body').droppable({ 
    accept: ".scp-el-draggable-row", 
    activeClass: "ui-state-hover", 
    hoverClass: "ui-state-active", 
    drop: function(event, ui) { 
     $(this) 
     .addClass("ui-state-highlight") 
     .append("<div class='row'></div>"); 
    } 
});

或者如果您需要添加拖動的HTML HTML，使用此

$('#main-body').droppable({ 
    accept: ".scp-el-draggable-row", 
    activeClass: "ui-state-hover", 
    hoverClass: "ui-state-active", 
    drop: function(event, ui) { 
    $(this) 
     .addClass("ui-state-highlight") 
     .append(ui.draggable[0].outerHTML); // this adds original draggable element 
    } 
});

下面的代碼將克隆元素

$('#main-body').droppable({ 
    accept: ".scp-el-draggable-row", 
    activeClass: "ui-state-hover", 
    hoverClass: "ui-state-active", 
    drop: function(event, ui) { 
     $(this) 
     .addClass("ui-state-highlight") 
     .append(ui.helper[0].outerHTML); // this adds cloned draggable element 
    } 
});

來源

2014-05-30 15:30:56

jQuery的投擲的GET拖動內容

回答

相關問題