Javascript 使用jquery或simple js将元素拖动到特定位置

首先，我害怕问这个问题，因为你可能会对我评价很差，但我不得不问。 我将自己删除该问题，请在评论中告诉我。

我想在用户将a元素向右移动25px时将元素移动到特定位置，然后它应该自动移动到右侧元素，如new ul>li应该在其a元素的第一个第二级创建，然后如果有人将这个移动更多到25px的元素向右拖动，那么它也应该移动到右侧，并且应该是第三级等等。并向左拖动以恢复到原始位置 当有人向右或向左拖动元素时，我想创建一个这样的树结构

[----1--1st level--]
[----2--1st level--]
  [----1--2nd level--]
    [----1--3rd level--]
    [----2--3rd level--]
      [----1--4th level--]
  [----2--2nd level--]
    [----1----]
    [----2----]
    [----3----]

---

我该怎么做？有js库吗？谢谢

我以前在stackoverflow上创建并提供了这个想法

我知道它可以改进，可以制作更好的版本，但现在你可以使用它并享受

它的特点是： »»支持键盘箭头键移动节点（左和右） »»支持鼠标左右拖动节点 »»在DOM中保存每个节点的级别数据，并在每个节点上显示 你可以

---

我的代码的结果：

JS&jQuery

/*Code by Ram >> https://stackoverflow.com/users/1474613/ram */

(function ($) {
    $.Noder = function (oneOfNodes) {
        this.element = '';
        oneOfNodes=(oneOfNodes instanceof $) ? oneOfNodes : $(oneOfNodes)
        this.baseX=oneOfNodes.position().left;
        this.currentX=0;
    };

    $.Noder.prototype = {
        InitEvents: function () {
            //`this` references the created instance object inside an instace's method,
            //however `this` is set to reference a DOM element inside jQuery event handler functions' scope.
            //So we take advantage of JS's lexical scope and assign the `this` reference to
            //another variable that we can access inside the jQuery handlers
            var that = this;
            //I'm using `document` instead of `this` so it will catch arrow keys
            //on the whole document and not just when the element is focused.
            //Also, Firefox doesn't fire the keypress event for non-printable characters
            //so we use a keydown handler
            $(document).keydown(function (e) {
                var key = e.which;
                if (key == 39) {
                    that.moveRight();
                } else if (key == 37) {
                    that.moveLeft();
                }
            });},
        setElement: function(element){
            this.element = (element instanceof $) ? element : $(element);
            console.log(this.element);
            this.currentX=this.element.position().left;
            console.log('currentX: '+this.currentX);
            this.element.addClass('active');
        },
        moveRight: function () {
            console.log('bseX: '+this.baseX);
            console.log('currentX: '+this.currentX);
            var max=(25*2)+this.baseX;
            console.log('max: '+max);
            if(this.currentX<max)
            {
                this.element.css("left", '+=' + 25);
                this.currentX=this.element.position().left;
                setElementLevel(this.element,this.currentX,this.baseX);
                console.log('currentX: '+this.currentX);
            }
        },
        moveLeft: function () {
            if(this.currentX>this.baseX)
            {
                this.element.css("left", '-=' + 25);
                this.currentX=this.element.position().left;
                setElementLevel(this.element,this.currentX,this.baseX);
                console.log('currentX: '+this.currentX);
            }
        }

    };
    $.Noder.defaultOptions = {
        currentX: 0
    };

}(jQuery));

function setElementLevel(element,currentX,baseX){
    var level=0;
    if (currentX==baseX+25)
        level=1;
    else if(currentX==baseX+25+25)
        level=2;
    element.data('level', level);
    setLevelOnElement(element);
}

function getElementLevel(element){
    console.log(element.data('level'));
    return element.data('level');
}

function setLevelOnElement(element){  
    var level = 0;
    if(typeof getElementLevel(element) !=='undefined')
        level = getElementLevel(element);
    console.log('my level: '+level);
    var $levelElement=element.find( ".node-level" );
    if ($levelElement && $levelElement.length>0)
    {
        $levelElement=$($levelElement[0]); 
        console.log($levelElement);
        $levelElement.html(level);
    }
}

var noder = new $.Noder($("#myTree>.node")[0]);

$("#myTree>.node").on('click',function(){
    $("#myTree>.node").each(function(){
        $(this).removeClass('active')
    });    
    console.log($(this)[0].id +' clicked')

    noder.setElement($(this)[0]);

})
noder.InitEvents();


$(document).ready(function() {
    var $dragging = null;
    var $myTree=$('ul#myTree');
    var $oneOfNodes=null;
    var baseX=0;
    if($myTree.length>0)
    {
        console.log($myTree);
        $oneOfNodes=$($myTree.children()[0]);
        console.log($oneOfNodes);
        baseX=$oneOfNodes.position().left;
        console.log('baseX >> '+baseX);
        console.log($myTree);
        var x=0;
        $('ul#myTree').find('li').each(function(){
            x++;
            console.log(x);
            setLevelOnElement($(this));
        });
    }

    $(document.body).on("mousemove", function(e) {
        if ($dragging) {
            var currentX=$dragging.position().left;
            if(e.pageX>(baseX+25) && e.pageX<(baseX+(2*25)))
            {
                $dragging.offset({left: (baseX+25)});
                setElementLevel($dragging,currentX,baseX);
            }
            else if((e.pageX)>(baseX+(2*25)) )
            {
                $dragging.offset({left: (baseX+(2*25))});
                setElementLevel($dragging,currentX,baseX);
            }
            else if(e.pageX<(baseX+25) )
            {
                $dragging.offset({left: (baseX)});
                setElementLevel($dragging,currentX,baseX);
            }
        }
    });

    $(document.body).on("mousedown",  function (e) {
        var $myTree=$('ul#myTree');
        if($(e.target) && $myTree && $myTree.length>0)
        {
            var $li=$(e.target).parent();
            var $ul=$(e.target).parent().parent();
            if ( $ul.is($myTree) && $(e.target).hasClass("node-level") )
            {
                $ul.find('li').each(function(){
                    $(this).removeClass('active');
                });
                $li.addClass('active');
                $dragging = $($li);
            }
        }
    });

    $(document.body).on("mouseup", function (e) {
        $dragging = null;
    });
});

通过使用

connectWith

选项，可以使用该库创建树形结构的可拖动列表：

$（'.sortable'）.sortable({
句柄：“.handle”，
connectWith:“.已连接”
});
*{
字体系列：Ubuntu，无衬线；
}
ulli{
利润率：15px；
}
ul-li.手柄{
光标：指针；
}


一级Foo
一级酒吧


二级


作为评论可能比作为回答要好。这并不能提供问题的答案。批评或要求作者澄清，在他们的帖子下方留下评论。@Dave的问题标题被Mubasher更改，他说我的答案对他有用，所以我再次提供…@emmanuel的问题标题被Mubasher更改，他说我的答案对他有用，所以我再次提供…太好了，我可以自定义你的代码来使用我的框架，谢谢RamI创建了这个想法，但它是由jQuery创建的。您可以考虑它的代码，并用mootools模拟它，或者如果可能的话，将您的js框架更改为jquery。。。无论如何，如果它对您有用，请更改您的问题标题及其标记，并将jQuery包含在其中，然后我将此评论写为，并在此处回答。好吗？我没问题，但我不能把节点拖到这里：在这个例子中，你可以在点击一个节点后使用键盘上的箭头键。这是一种安全的方法。你用箭头键测试过吗？我明白了，但是有没有一种方法可以用鼠标拖动？当然，我们可以用jQuery来做，如果你愿意，我可以更改我的代码并在这里创建答案，但是在这里我不能这样做，因为你的问题标题和标签是关于mootools的，否则你可以更改它并在其中包含jQuery。我不能向右拖动以创建第二级和第三级节点？@Mubasher不，正如我所说的-它不是一个“智能”库，它只是使创建和管理可拖动列表更容易。在此基础上，您可以创建一个管理器，在这样或那样的情况下处理和创建新列表happens@Mubasher另外，还有一个很棒的教程，不过我会在ram给我答案后再做。
<ul id="myTree">
    <li class="node" id="node1">
        <span class="node-level"></span>
        <span class="node-content">Node 1</span>
    </li>
    <li class="node" id="node2">
        <span class="node-level"></span>
        <span class="node-content">Node 2</span>
    </li>
    <li class="node" id="node3">
        <span class="node-level"></span>
        <span class="node-content">Node 3</span>
    </li>
    <li class="node" id="node4">
        <span class="node-level"></span>
        <span class="node-content">Node 4</span>
    </li>
    <li class="node" id="node5">
        <span class="node-level"></span>
        <span class="node-content">Node 5</span>
    </li>
    <li class="node" id="node6">
        <span class="node-level"></span>
        <span class="node-content">Node 6</span>
    </li>
    <li class="node" id="node7">
        <span class="node-level"></span>
        <span class="node-content">Node 7</span>
    </li>
</ul>

#myTree{
    margin:20px;
    padding:0;
    list-style-type:none;
    font-size:11px;
}
#myTree>li>.node-level{
    padding:6px 10px;
    color:#ddd;
    background:gray;
    position:relative;
    cursor:move;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#myTree>li>.node-content{
    padding:5px; 15px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#myTree>.node:hover {
    background:#acd;
    color:#004;
}
#myTree>.node.active {
    border:1px #a66 solid;
    background:#fd8;
    color:#004;
}
#myTree>li.node {
    width:151px;
    background:#ddd;
    margin-top:2px;
    padding:5px 0px 5px 0;
    color:#555;
    cursor:pointer;
    position:relative;
    border:1px solid #ccc;
}
html, body {
    height:100%;
}
div { width:151px;
    background:#ddd;
    margin-top:2px;
    padding:5px 15px;
    color:#555;
    cursor:pointer;
    position:relative;
    border:1px solid #ccc; }