有一个JQuery插件,它结合了Draggable和Selectable

我想实现一个网络界面与许多项目，可以选择和拖动来定位他们，组或单独。而是像Windows桌面，真的。

我们已经使用JQuery，所以添加这些将是第一选择。 JQuery UI Draggables和Selectables单独做我们想要的很多东西，但是不是真的一起工作，给我们正在寻找的那种效果。

我完全不知所措的JQ插件网站(它的’流行’算法似乎并不非常有用)，并将欢迎指导，以避免在这里的很多轮改造，最好的方法，因为我猜这个隐喻有已经完成。

解决方法

我也需要做同样的事情，我不想使用来自eyecon.ro的界面扩展。经过一番研究，我发现 Combining Selectables And Draggables Using jQuery UI.它被很好地告诉，但为了使代码片段运行你必须挖入它。我能够使它的工作。我稍微改变了，这是我的方式来完成。它需要修改在生产级别上使用，但我希望它有所帮助。

// 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样式，以便能够看到发生了什么：

#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标记：

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

有一个JQuery插件,它结合了Draggable和Selectable

解决方法

猜你在找的jQuery相关文章