如何使用javascript在一个div中拖放多个div_Javascript_Jquery

如何使用javascript在一个div中拖放多个div

javascript jquery

如何使用javascript在一个div中拖放多个div,javascript,jquery,Javascript,Jquery,我在前面提到的一个项目中遇到了问题，现在的问题是我想拖拽一个div并将其放到另一个div。如果我拖拽一个div，那么它应该添加到先前拖拽的div下面。我如何才能做到这一点？我当前的代码没有追加下一个删除的div，而是覆盖了第一个div。我尝试过很多解决方案，但最终都弊大于利。谁能帮帮我，谢谢 <html> <head> <title>CRM</title> <link rel="stylesheet" href="style/

我在前面提到的一个项目中遇到了问题，现在的问题是我想拖拽一个div并将其放到另一个div。如果我拖拽一个div，那么它应该添加到先前拖拽的div下面。我如何才能做到这一点？我当前的代码没有追加下一个删除的div，而是覆盖了第一个div。我尝试过很多解决方案，但最终都弊大于利。谁能帮帮我，谢谢

<html>
<head>
    <title>CRM</title>
    <link rel="stylesheet" href="style/style.css" type="text/css">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>


    <script>
    $(document).ready(function(){

        $(".dragable").draggable({
            cancel:"a.ui-icon",
            revert:true,
            helper:"clone",
            cursor:"move",
            revertDuration:0
        });

    $('.droppable').droppable({
        accept: ".dragable",
        activeClass: "ui-state-highlight",
        drop: function( event, ui ) {
        // clone item to retain in original "list"
        var $item = ui.draggable.clone();

        $(this).addClass('has-drop').html($item);

    }
});
    });
    </script>

</head>

<body>
    <div class="main-container">
        <div class="wrapper">
            <div class="tb-head">

                <div class="target">
                    <span class="target-span">Target</span>
                </div>

                <div class="user1">
                    <span class="user1-span">User1</span>
                </div>

                <div class="user2">
                    <span class="user2-span">User2</span>
                </div>

                <div class="user3">
                    <span class="user3-span">User3</span>
                </div>

                <div class="user4">
                    <span class="user4-span">User4</span>
                </div>

                <div class="clear"></div>
            </div>

            <div class="tb-body">

                <div class="inner-target">

                    <div class="dragable">
                        <span class="targetinn-span">Target Lead</span>
                    </div>

                    <div class="dragable">
                        <span class="targetinn-span">Assign1 Lead</span>
                    </div>

                    <div class="dragable">
                        <span class="targetinn-span">Assign2 Lead</span>
                    </div>

                    <div class="dragable">
                        <span class="targetinn-span">Assign3 Lead</span>
                    </div>

                </div>

                <div class="inner-user1">
                    <div class="droppable">
                        <span class="user1inn-span"></span>
                    </div>
                </div>

                <div class="inner-user2">
                    <div class="droppable">
                        <span class="user2inn-span"></span>
                    </div>
                </div>

                <div class="inner-user3">
                    <div class="droppable">
                        <span class="user3inn-span"></span>
                    </div>
                </div>

                <div class="inner-user4">
                    <div class="droppable">
                        <span class="user4inn-span"></span>
                    </div>
                </div>

                <div class="clear"></div>
            </div>
    </div>

</body>
</html>


客户关系管理
$（文档）.ready（函数（）{
$（“.draggable”）.draggable({
取消：“a.ui-icon”，
回复：对，
助手：“克隆”，
光标：“移动”，
恢复持续时间：0
});
$（'.droppable'）.droppable({
接受：“.dragable”，
activeClass：“ui状态突出显示”，
drop：函数（事件、用户界面）{
//克隆要保留在原始“列表”中的项目
var$item=ui.draggable.clone（）；
$（this.addClass（'has-drop'）.html（$item）；
}
});
});
目标
用户1
用户2
用户3
用户4
目标铅
分配1条线索
分配2领先
指派3个领导

只需更改这行代码即可

$(this).addClass('has-drop').html($item);

对此

$(this).addClass('has-drop').append($item);

通过调用.html（）您用最后一个删除的元素替换了原来的html。

设置一个JSFIDLE，这样我们就可以看到您的问题哦，我花了几个小时试图解决它，是的，我真的不应该称自己为编码器。欢迎。我自己就知道这一点，在我的例子中，主要的问题是忘记分号；）。有时会发生。是的，分号是一种普遍现象。每个人都这样做。