使用Javascript / Jquery将节点Div向上和向下移动 [英] Moving node Div Up and Down using Javascript/Jquery

问题描述

我想知道是否有一种方法可以在不使用id的情况下上下移动节点div元素。当选中该项目并右键单击时，会出现上移和下移选项，现在处于上移状态，单击它应该上移div。

例如..

 < div> 
< div> 1< / div> 
< div> 2< / div> 
< div> 3< / div> 
< div> 4< / div> 
< div> 5< / div> 
 
< / div> 
  

假设我右键点击了div 3，那么Move Up选项会在那里点击Move Up它应该向上移动，新的顺序应该是

 < 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>向上< / a> 
< a href =＃id =down>向下< / a> 
  

Jquery库

将此库添加到您的网页中

 < script type =text / javascriptsrc ='http：// code.jquery.com/jquery-2.1.0.min.js'></script> 
  

Jquery
< pre $ $（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（））;
}）;


$（如果（选择> 0）
{
jQuery（$（itemlist）.children（ ）.eq（selected-1））。before（jQuery（$（itemlist）.children（）。eq（selected）））;
selected = selected-1;
}
} ）;

$（＃down）。click（function（e）{
e.preventDefault（）;
if（选择< len）
（$（itemlist）.children（）。eq（selected）））;
selected = {
jQuery（$（itemlist）.children（）。eq（selected + 1）选中+1;
}
}）;

}）;


I was wondering is there a way in Javascript to just move node div element up and down without id. When the item is selected and right clicked then there would be Move Up and Move Down option,now on Move Up click it should Move Up in div.

For example..

<div>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>

        </div>

Suppose i right clicked on div 3, then Move Up option will be there so on click of Move Up it should Move Up and new sequence should be

 <div>
        <div>1</div>
        <div>3</div>
        <div>2</div>
        <div>4</div>
        <div>5</div>

    </div> 

Thanks for help.

解决方案

Here is some example. Try Demo.

Click on the Item to select it.

<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 library

Add this library to your page

<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;
        }
    });

});

这篇关于使用Javascript / Jquery将节点Div向上和向下移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！