Czy istnieje plugin JQuery, który łączy przeciąganie i wybieranie
Chcę zaimplementować interfejs sieciowy z wieloma elementami, które można wybrać i przeciągnąć, aby je ustawić, w grupach lub pojedynczo. Raczej jak pulpit Windows, naprawdę.
Używamy już JQuery, więc dodatki do tego byłyby pierwszym wyborem. JQuery UI Draggables i Selectables robią wiele z tego, czego chcemy, ale tak naprawdę nie współpracują ze sobą, aby dać efekt, którego szukamy.
Jestem kompletnie przytłoczony JQ strona z wtyczkami (jest to "popularny" algorytm nie wydaje się zbyt przydatny), a mile widziane wskazówki dotyczące najlepszego sposobu uniknięcia wielu zmian w kołach tutaj, ponieważ domyślam się, że ta metafora już została wykonana.
3 answers
Też musiałem zrobić to samo i nie chciałem używać rozszerzenia interfejsu z eyecon.ro. po kilku badaniach, znalazłem łączenie Selectables i Draggables za pomocą interfejsu jQuery. Jest ładnie powiedziane, ale aby urywki kodu działały, musisz się w to zagłębić. Udało mi się. Trochę go zmieniłem, to jest mój sposób, aby to zrobić. Wymaga modyfikacji do wykorzystania na poziomie produkcji, ale mam nadzieję, że to pomoże.
// 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});
});
}
});
Style CSS, aby móc zobaczyć, co jest 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;
}
Znaczniki HTML:
<div id="selectable">
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div>item 4</div>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-04-08 22:53:39
To pytanie jest istotne, ale jest stare; tak samo są odpowiedzi. Oto zaktualizowana wersja jsfiddle @idFlood, która działa z jQuery 1.9.1 + jQueryUI 1.10.3:
// 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");
}
}
});
Miałem problem z wywołaniem _mousestop () wywołaniem błędu, więc go usunąłem; oznacza to, że stan ui-selecting
nie występuje już po kliknięciu, ale wszystkie inne funkcje pozostają nienaruszone.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-20 03:14:54
Wprowadziłem modyfikację odpowiedzi udzielonej przez Sinana YASARA. Nie jest idealny, ale już zachowuje się o wiele bardziej jak ja, z wyjątkiem.
Jednym z głównych dodatków jest słuchacz kliknięć, który wywołuje 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);
});
Możesz zobaczyć kompletny działający przykład tutaj: http://jsfiddle.net/DXrNn/4/
Dostępna jest również wtyczka jquery-ui, która właśnie to robi: http://code.google.com/p/jqdragdropmultiselect / Problem w tym, że nie wygląda utrzymane.
Edit: jeśli zdefiniujesz opcję "Filtr" przeciąganego, będziesz musiał wywołać selectable.refresh () przed wyborem._mouseStop (null).
$( "#selectable > div" ).click( function(e){
...
var selectable = $("#container").data("selectable");
selectable.refresh();
selectable._mouseStop(null);
...
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-12-27 13:32:40