[英]Moving div Up and Down Changing ID Num using Javascript/Jquery
[英]Moving node Div Up and Down using Javascript/Jquery
我想知道Javascript中是否有一種方法可以僅在不使用id的情況下上下移動node div元素。 當選中該項目並右鍵單擊時,將有“上移”和“下移”選項,現在在“上移”上單擊時,它應在div中向上移動。
例如..
<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
假設我在div 3上單擊鼠標右鍵,然后會出現“上移”選項,因此在單擊“上移”時,它應該“上移”並且新的序列應該是
<div>
<div>1</div>
<div>3</div>
<div>2</div>
<div>4</div>
<div>5</div>
</div>
感謝幫助。
這是一些例子。 嘗試演示 。
單擊項目以將其選中。
<div id='items'>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<a href="#" id="up">Up</a>
<a href="#" id="down">Down</a>
jQuery庫
將此庫添加到您的頁面
<script type="text/javascript" src='http://code.jquery.com/jquery-2.1.0.min.js'></script>
jQuery的
$(document).ready(function(){
var selected=0;
var itemlist = $('#items');
var len=$(itemlist).children().length;
$("#items div").click(function(){
selected= $(this).index();
alert("Selected item is " + $(this).text());
});
$("#up").click(function(e){
e.preventDefault();
if(selected>0)
{
jQuery($(itemlist).children().eq(selected-1)).before(jQuery($(itemlist).children().eq(selected)));
selected=selected-1;
}
});
$("#down").click(function(e){
e.preventDefault();
if(selected < len)
{
jQuery($(itemlist).children().eq(selected+1)).after(jQuery($(itemlist).children().eq(selected)));
selected=selected+1;
}
});
});
這是代碼。 右鍵單擊列表項,然后向上或向下移動它。 的HTML
<div class="block">
<div>
<div class="contextMenu">
<ul>
<li data-sort="up">Up</li>
<li data-sort="down">Down</li>
</ul>
</div>
1</div>
<div>
<div class="contextMenu">
<ul>
<li data-sort="up">Up</li>
<li data-sort="down">Down</li>
</ul>
</div>
2</div>
<div>
<div class="contextMenu">
<ul>
<li data-sort="up">Up</li>
<li data-sort="down">Down</li>
</ul>
</div>
3</div>
<div>
<div class="contextMenu">
<ul>
<li data-sort="up">Up</li>
<li data-sort="down">Down</li>
</ul>
</div>
4</div>
<div>
<div class="contextMenu test">
<ul>
<li data-sort="up">Up</li>
<li data-sort="down">Down</li>
</ul>
</div>
5</div>
</div>
的CSS
.block {width:300px;}
.block > div { border:1px solid #e5e5e5; position:relative;}
.contextMenu{ position:absolute; font-size:11px; width:50px; background:#e5e5e5; z-index:999; display:none;}
.contextMenu ul{margin:0; padding:0; list-style:none;}
.contextMenu li{border:1px solid #666; padding:5px;}
腳本
$('.block > div').mousedown(function(e){
if( e.button == 2 ){
$(this).find('.contextMenu').show().end().siblings('div').find('.contextMenu').hide();
};
})
$('.contextMenu li').on('click', function(){
var parentDiv = $(this).closest('div.contextMenu').parent(),
dir = $(this).data('sort');
if(dir === 'up'){
parentDiv.insertBefore( parentDiv.prev() )
} else if(dir === 'down'){
parentDiv.insertAfter( parentDiv.next() )
}
$('.contextMenu').hide()
});
這可能不完全是您想要的答案,但是在查看要實現的目標時,您可以使用jQuery UI Sortable
example here
: 小提琴
$("#downButton").click(function() {
var selectedRows = $('#tblValues tr').find("td:first").find("input:checked").parents('tr');
$(selectedRows).each(function(index, item) {
$(item).insertAfter($(item).next());
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.