ドラッグ可能と選択可能を組み合わせたJQueryプラグインがありますか

Question

私は、グループ内でのいずれかでのいずれかを選択してドラッグして配置することができる項目の数を持つWebインターフェースを実装したいと考えています。むしろ、Windows Desktopのように。

私たちは既にJQueryを使用していますので、その追加が第1の選択肢になります。 JQueryのUI DraggablesとSelectablesは、私たちが望むものの多くを個別に行いますが、実際には一緒に働いているわけではありません。

私は、JQのプラグインサイト（「人気のあるアルゴリズム」はあまり役に立たないと思われます）に完全に圧倒されています。そして、私が推測するように、ホイールリニューアルを避ける最良の方法についての指導を歓迎します。このメタファーはすでに完成しているということです。

Answer 1

私は同じことをする必要もあり、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> 

Answer 2

私はシナンYasarによって与えられた答えにいくつかの変更を加えました。それは完璧ではありませんが、それは私が除いてはるかに多くの動作をしています。

主なものの1つは、selectを呼び出すクリックリスナーです。

// manually trigger the "select" of clicked elements 
$("#selectable > div").click(function(e){ 
    if (e.metaKey == false) { 
     // if command key is pressed don't deselect existing elements 
     $("#selectable > div").removeClass("ui-selected"); 
     $(this).addClass("ui-selecting"); 
    } 
    else { 
     if ($(this).hasClass("ui-selected")) { 
      // remove selected class from element if already selected 
      $(this).removeClass("ui-selected"); 
     } 
     else { 
      // add selecting class if not 
      $(this).addClass("ui-selecting"); 
     } 
    } 

    $("#selectable").data("selectable")._mouseStop(null); 
}); 

あなたはここに完全な作業例を見ることができます：http://jsfiddle.net/DXrNn/4/

をちょうどそれを行う可能なjqueryの-UIのプラグインもあります：http://code.google.com/p/jqdragdropmultiselect/ problemeは、それが維持見えないということです。

編集：ドラッグ可能なフィルタの「フィルタ」オプションを定義する場合は、selectable._mouseStop（null）の前にselectable.refresh（）を呼び出す必要があります。

$("#selectable > div").click(function(e){ 
    ... 
    var selectable = $("#container").data("selectable"); 
    selectable.refresh(); 
    selectable._mouseStop(null); 
    ... 

Answer 3

この質問は関連していますが古いものです。答えもそうです。 jQueryの1.9.1 + jQueryUI 1.10.3で動作します@ idFloodのjsfiddleの Here's an updated version：

// store selected elements and the offset of the dragged element 
var selected = $([]), offset = {top:0, left:0}; 

$("#selectable > div").draggable({ 
    start: function (event, ui) { 
     var $this = $(this); 

     if ($this.hasClass("ui-selected")) { 
      // if this is selected, attach current offset 
      // of each selected element to that element 
      selected = $(".ui-selected").each(function() { 
       var el = $(this); 
       el.data("offset", el.offset()); 
      }); 
     } else { 
      // if this is not selected, clear current selection 
      selected = $([]); 
      $("#selectable > div").removeClass("ui-selected"); 
     } 
     offset = $this.offset(); 
    }, 

    drag: function (event, ui) { 
     // drag all selected elements simultaneously 
     var dt = ui.position.top - offset.top, dl = ui.position.left - offset.left; 
     selected.not(this).each(function() { 
      var $this = $(this); 
      var elOffset = $this.data("offset"); 
      $this.css({top: elOffset.top + dt, left: elOffset.left + dl}); 
     }); 
    } 
}); 

// enable marquee selecting and deselect on outside click... 
$("#selectable").selectable(); 

// ...but manually implement selection to prevent interference from draggable() 
$("#selectable").on("click", "div", function (e) { 
    if (!e.metaKey && !e.shiftKey) { 
     // deselect other elements if meta/shift not held down 
     // $("#dc-modules .dc-module").removeClass("ui-selected"); 
     $("#selectable > div").removeClass("ui-selected"); 
     $(this).addClass("ui-selected"); 
    } else { 
     if ($(this).hasClass("ui-selected")) { 
      $(this).removeClass("ui-selected"); 
     } else { 
      $(this).addClass("ui-selected"); 
     } 
    } 
}); 

私はエラーをスロー_mouseStop（）の呼び出しで問題を抱えていたので、私はそれを削除しました。つまり、ui-selectingの状態はクリックで発生しなくなりましたが、その他の機能はそのまま残ります。