1

已经看过这样的例子：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>
4

0 回答 0