Question

我的代码：JSBIN

如何将可拖动项HTML代码复制到droppable项？

我用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>

在droped之后

在此代码中然后在drob框中显示“Droped”

但是如何显示可拖动项子代码

例如：如果draggable1项目下垂，则dropb box子代码显示此代码：

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

抱歉英语不好

Answer 1

基本上我们使用clone()来获取对象的精确副本。

我为你做了一个演示，检查这是否是你需要的

演示：Fiddle

Answer 2

我的可拖动元素是

$('.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
    }
});

jquery droppable获取拖动内容

2 个答案: