Question

已经看过这样的例子：http://jsfiddle.net/andrewwhitaker/t97FE/light/和其他人试图合并几个部分，但没有任何成功。

我正在尝试使用将从数据库存储和检索的克隆在目标上创建多个副本（克隆）的工具栏

<style>
.toolbutton { width: 20px; height: 20px; padding: 0px; float: left; margin: 0 2px 2px 0;text-align:center;cursor:pointer}
#tooltarget { width:200px; height:100px; border:2px solid #ccc; padding: 1px; }
#toolbar {width:200px;height: 22px; margin:0px 0px 0px 0px;border:2px solid #ccc;padding: 2px 2px 2px 2px;}
</style>
<script>
    $(function() {
    $( "#btn_a" ).draggable({revert:'invalid',helper:"clone"});
    $( "#btn_b" ).draggable({revert:'invalid',helper:"clone"});
    $( "#btn_c" ).draggable({revert:'invalid',helper:"clone"});
    $('#tooltarget').droppable({
        accept:'.toolbutton',
        drop: function(event,ui){
            $(this).append($(ui.draggable).clone());
            $('#tooltarget .toolbutton').addClass('target-item');
            $(".target-item").draggable({containment: 'parent'});
        }
    }); 
});
</script>
</head>
<body>
 <div id="toolbar">
    <div id="btn_a" class="toolbutton ui-widget-content">A</div>
    <div id="btn_b" class="toolbutton ui-widget-content">B</div>
    <div id="btn_c" class="toolbutton ui-widget-content">C</div>
</div>

 <div id="tooltarget">
 </div>

工具按钮，工具栏和tooltarget（拖放克隆）

0 个答案: