標題: Jquery 拖曳 後 複製 [打印本頁]
作者: beixyu 時間: 2011-11-3 12:30 標題: 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>
| 歡迎光臨 jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化 (http://jsgears.com/) |
|