私は同じことをする必要もあり、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>
http://stackoverflow.com/questions/34698117/elements-became-randomly-non-resizable-after-draggingquanconのコードもこの質問への回答が含まれていますが、回答のコードでは、ドラッグでサイズ変更がランダムに発生します – Andrus