返回列表 發帖

Jquery 拖曳 後 複製

最近 再做一個新功能 圖片拖曳後自動複製
例如範例中 我想從左邊拖曳 按鈕到右邊後 在右邊新增一個 相同按鈕 但 左邊按鈕還可以維持在相同位置

今天試了一天一直沒有頭緒  不知道 有誰有誰可以幫我修改
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://demonstration.abgne.tw/jquery/plugins/0033/js/jquery.dragsort.js"></script>

<style type="text/css">

        .sample {
                padding: 20px;
                width: 800px;
                margin: auto;
                padding-top: 20px;
                margin-top:20px;
        }
        ul {
                margin: 0;
                padding: 0;
                margin-left: 20px;
        }
        #list1, #list2 {
                width: 350px;
                list-style: none;
                margin: 0;
        }
        #list1 li, #list2 li {
                float: left;
                padding: 5px;
                width: 100px;
                height: 100px;
        }
        #list1 li div, #list2 li div {
                width: 90px;
                height: 50px;
                border: solid 1px black;
                background-color: #E0E0E0;
                text-align: center;
                padding-top: 40px;
        }
        #list2 {
                float: right;
        }
        .placeHolder div {
                background-color: white !important;
                border: dashed 1px gray !important;
        }

</style>

<script type="text/javascript">
        $(function(){
                $("ul:first").dragsort();

                $("#list1, #list2").dragsort({
                        dragSelector: "div",
                        dragBetween: true,
                        placeHolderTemplate: "<li class='placeHolder'><div></div></li>"
                });
        });

</script>


 
<body>
        <div class="sample">

                <ul id="list2">
                        
                </ul>
 
                <ul id="list1">
                        <li><div>範例1</div></li>
                        <li><div>範例2</div></li>
                        <li><div>範例3</div></li>
                        <li><div>範例4</div></li>
                        <li><div>範例5</div></li>
                        <li><div>範例6</div></li>
                        <li><div>範例7</div></li>
                        <li><div>範例8</div></li>
                        <li><div>範例9</div></li>
                </ul>
                
                <a href="" onclick="sample.submit(); return false;" class="button">Check</a>
                <file_put_fine>
        </div>
        
</body>

返回列表 回復 發帖