是否有一个结合了Draggable和Selectable的JQuery插件 [英] Is there a JQuery plugin which combines Draggable and Selectable

问题描述

我正在寻找一个可以选择并拖动的项目来实现一个网页界面，以便定位它们，分组或单独。而不是像Windows桌面那样。

I'm looking to implement a web interface with a number of items which can be selected and dragged around to position them, either in groups or singly. Rather like the Windows Desktop, really.

我们已经在使用JQuery了，所以增加这些将是首选。 JQuery UI Draggables和Selectables可以单独完成我们想要的大部分功能，但并不能真正协同工作来提供我们正在寻找的效果。

We're using JQuery already, so additions to that would be first choice. JQuery UI Draggables and Selectables individually do much of what we want, but don't really work together to give the sort of effect we're looking for.

完全完美被JQ插件网站淹没了（这个'流行'算法似乎并不是很有用），并且欢迎关于避免大量轮子重建的最佳方法的指导，因为我猜测这个比喻已经完成了。

I am completely overwhelmed by the JQ plugin site (it's 'popular' algorithm doesn't seem very useful), and would welcome guidance as to the best way to avoid a lot of wheel-reinvention here, as I would guess that this metaphor has already been done.

推荐答案

我也需要做同样的事情，我不想使用eyecon.ro的接口扩展。经过一番调查，我发现 使用jQuery UI组合可选和可拖拽 。它很好地告诉，但要使代码片段运行，你必须深入研究它。我能够使它工作。我稍微改变了它，这是我完成它的方式。它需要在生产层面上使用修改，但我希望它有帮助。

I also needed to do same thing, and i didn't want to use interface extension from eyecon.ro. After some research, I found Combining Selectables And Draggables Using jQuery UI. It is nicely told but to make the code snippets run you have to dig into it. I was able to make it work. I slightly changed it, this is my way to get it done. It needs modifications for using on production level, but i hope it helps.

// this creates the selected variable
// we are going to store the selected objects in here
var selected = $([]), offset = {top:0, left:0}; 

// initiate the selectable id to be recognized by UI
$("#selectable").selectable({
    filter: 'div',
});

// declare draggable UI and what we are going to be doing on start
$("#selectable div").draggable({
     start: function(ev, ui) {
        selected = $(".ui-selected").each(function() {
           var el = $(this);
            el.data("offset", el.offset());
        });

        if( !$(this).hasClass("ui-selected")) $(this).addClass("ui-selected");
        offset = $(this).offset();
    },
    drag: function(ev, ui) {
        var dt = ui.position.top - offset.top, dl = ui.position.left - offset.left;

        // take all the elements that are selected expect $("this"), which is the element being dragged and loop through each.
        selected.not(this).each(function() {
             // create the variable for we don't need to keep calling $("this")
             // el = current element we are on
             // off = what position was this element at when it was selected, before drag
             var el = $(this), off = el.data("offset");
             el.css({top: off.top + dt, left: off.left + dl});
        });
    }
});

CSS样式可以看到发生了什么：

CSS Styles to be able to see what's happening:

#selectable {   width: 100%; height: 100%;}
#selectable div {
    background: #ffc;
    line-height: 25px;
    height: 25px;
    width: 200px;
    border: 1px solid #fcc;
    }
#selectable div.ui-selected {
    background: #fcaf3e;
    }
#selectable div.ui-selecting {
    background: #8ae234;
    }

HTML标记：

HTML Markup:

<div id="selectable">
    <div>item 1</div>
    <div>item 2</div>
    <div>item 3</div>
    <div>item 4</div>
</div>

这篇关于是否有一个结合了Draggable和Selectable的JQuery插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！