javascript - 使用 jquery 或简单的 js 将元素拖动到特定位置

Question

首先，我不敢问这个问题，因为你可以评价我不好，但我不得不问。我会自己删除问题，请在评论中告诉我。

我想在用户将 an 元素向右移动 25px 时将元素移动到特定位置然后它应该像新 ul 一样自动移动到正确的元素> li 应该在它的第一个第二级元素中创建然后如果有人拖动这个元素已经向右移动了 25px，那么它也应该向右移动，它应该是第 3 级等等。也向左侧拖动以恢复到原始位置当有人将元素向右或向左拖动时，我想制作这样的树结构

[----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库？谢谢

Answer 1

我创造并提供了这个想法 here 之前在 stackoverflow 上。

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

特点:

»» 支持键盘方向键移动节点(左右)

»» 支持鼠标左右拖动节点

»» 将每个节点的关卡数据保存在DOM中并显示在每个节点上

你可以 test it on fiddle

---

我的代码结果:

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

HTML

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

CSS

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