jQuery с возможностью сортировки и удаления [jquery, jquery-ui-draggable, jquery-ui-sortable, jquery-ui-droppable]

arrow_upward
22
arrow_downward

Вот упрощенная версия решения Колина.

Самая большая разница заключается в том, что это решение не хранит весь html сортируемых элементов, а только текущий перетаскиваемый элемент. Затем он вставляется в исходное положение, если предмет падает в область, которую можно сбросить.

В любом случае, вот код:

<!doctype html>
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    var dropped = false;
    var draggable_sibling;

    $("#sortable").sortable({
        start: function(event, ui) {
            draggable_sibling = $(ui.item).prev();
        },
        stop: function(event, ui) {
            if (dropped) {
                if (draggable_sibling.length == 0)
                    $('#sortable').prepend(ui.item);

                draggable_sibling.after(ui.item);
                dropped = false;
            }
        }
    });

    $(".droppable").droppable({
        activeClass: 'active',
        hoverClass:'hovered',
        drop:function(event,ui){
            dropped = true;
            $(event.target).addClass('dropped');
        }
    });
});

</script>

<style type="text/css">
#sortable li{
    clear:both;
    float:left;
}

.droppable {
    clear:both;
    height:300px;
    width:400px;
    background-color:#CCC;
}

.droppable.active { background: #CFC; }
.droppable.hovered { background: #CCF; }
.dropped { background: #f52; }
</style>

</head>
<body>

<ul id="sortable">
    <li id="one">One</li>
    <li id="two">Two</li>
    <li id="three">Three</li>
    <li id="four">Four</li>
    <li id="five">Five</li>
    <li id="six">Six</li>
</ul>

<div class="droppable">Drop Here</div>
<div class="droppable">Drop Here</div>

</body>
</html>

Он по-прежнему страдает от той же проблемы, что и решение Колина, если элемент перетаскивается в новую позицию в списке, а затем удаляется за пределы как <ul>, так и выпадающего <div>. После этого элемент не сбрасывается, а занимает последнюю позицию в списке (проверено в Google Chrome). В любом случае, это легко решается с помощью некоторого обнаружения мыши, или это может быть даже желательным поведением.

Reimund 05.12.2010

comment

Использовал вариант этого в моем проекте. Спасибо +1 - Adam Tomat; 06.11.2012

comment

Код выше codepen.io/tcosentino/pen/myVEEJ ‹ - не уверен, как это закончилось с VEEJ - Troy Cosentino; 06.12.2014

comment

Действительно ли нужно сохранять состояние и зависеть от его правильности? Кажется, можно было бы работать со значениями положения/смещения события мыши. - Roman Pokrovskij; 19.03.2015

arrow_upward
4
arrow_downward

Насколько я мог судить, проблема с предыдущим кодом, который я опубликовал, заключается в том, что функция удаления droppable вызывалась до наведения мыши на sortable, и поскольку я переписал список, sortable злился (из-за отсутствия лучших терминов ). Это несколько предположение.

Глядя на окончательный код:

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
    <script type="text/javascript">

var dropped = false;
var templateHtml;
$(document).ready(function(){

    setSortable();

    $("#droppable").droppable({
        activeClass: 'active',
        hoverClass:'hovered',
        accept:".drop",
        drop:function(event,ui){
            dropped = true;
            //alert(ui.draggable.text());
        }
    });

});

function setSortable(){
    $("#sortable").sortable({
        stop:function(event,ui){
            if(dropped){
                $("#sortable").sortable('destroy').html(templateHtml);
                dropped = false;
                setSortable();
            }
        }
    });

    $("#sortable li").addClass("drop").bind('mousedown',function(){
        templateHtml = $("#sortable").html();
    });
}

    </script>
    <style type="text/css">
    #sortable li{
        clear:both;
        float:left;
    }

    #droppable {
        clear:both;
        height:300px;
        width:400px;
        background-color:#CCC;
    }
    #droppable.active {
        background-color:#CFC;
    }
    #droppable.hovered {
        background-color:#CCF;
    }
    </style>

</head>
<body>

<ul id="sortable">
<li id="one">One</li>
<li id="two">Two</li>
<li id="three">Three</li>
<li id="four">Four</li>
<li id="five">Five</li>
<li id="six">Six</li>
</ul>

<div id="droppable">
Drop Here
</div>

</body>

Здесь замешаны тонны причуд.

Я попытался сохранить #sortable html в начальном событии sortable, но это get вызывается после применения всех ui-css и в итоге размещает элементы списка в сумасшедших местах. Итак, мне нужно было использовать функцию mousedown для LI.

setSortable находится в функции, потому что событие остановки перезаписывает сортировку, которая, я думаю, является «рекурсивной». Не уверен в точной терминологии здесь, но мы можем пойти с раздражающе запутанной.

К счастью, функция удаления droppable вызывается до функции остановки sortables, поэтому я смог установить глобальную переменную «dropped», которая использовалась для проверки того, был ли удален элемент.

Я все еще удивлен, что это было не так просто сделать, я думал, что у jQuery будут функции, которые справятся с этим намного лучше. Возможно, я что-то упускаю?

Colin 20.01.2010

comment

Пожалуйста, посмотрите мою слегка упрощенную версию. - Reimund; 06.12.2010

arrow_upward
1
arrow_downward

Не совсем то, о чем вы просили, но мне нужен был исходный контейнер, в котором элементы можно было бы перетаскивать в другой сортируемый контейнер, и я подумал, что должен поделиться им. Вот как я этого добился (jQuery 1.8.3):

$("#sortable-list").sortable();
$("#initial-list div").draggable({
  revert: true,
  revertDuration: 0
});

$("#initial-list").droppable({
  accept: ".item-selected",
  drop: function(e, ui) {
    var dropped = ui.draggable;
    var droppedOn = $(this);
    var itemInOtherList = $(this).children("#" + dropped.attr('id'));
    itemInOtherList.removeClass('ui-state-disabled').draggable({ disabled: false });
    dropped.remove();
  }
});
$("#sortable-list").droppable({
  accept: ".item-initial",
  drop: function(e, ui) {
    var dropped = ui.draggable;
    var droppedOn = $(this);
    droppedOn.append(dropped.clone()
      .removeAttr('style')
      .removeClass("item-initial")
      .addClass("item-selected"));
    dropped.animate(dropped.data().origPosition, {
      complete: function() {
        $(this).addClass('ui-state-disabled').draggable({ disabled: true });
      }
    });
  }
});

JSFiddle: http://jsfiddle.net/Muskar/dwz4mvxa/8/

Aske B. 17.05.2017

arrow_upward
0
arrow_downward

Я потратил на это весь день, и я стал намного ближе, но все еще не так хорошо, как хотелось бы. Теперь у меня есть нужные мне функции, но возникает ошибка Javascript.

Проблема заключается в том, чтобы сортируемый список возвращался в предыдущее положение, если элемент был удален в выпадающем списке, а не в списке. В настоящее время я сохраняю html onmousedown, а затем переписываю html в функции сброса droppable. Это работает, но это дает мне переменную jquery с нулевой ошибкой. Может ли кто-нибудь найти лучшее решение?

Код:

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
    <script type="text/javascript">

var templateHtml;
$(document).ready(function(){

    $("#sortable").sortable();
    $("#sortable li").addClass("drop").bind('mousedown',function(){
        templateHtml = $("#sortable").html();
    });
    $("#droppable").droppable({
        activeClass: 'active',
        hoverClass:'hovered',
        accept:".drop",
        drop:function(event,ui){
            $("#sortable").sortable('destroy').html(templateHtml);
            $("#sortable").sortable();
            $("#sortable li").addClass("drop").bind('mousedown',function(){
                templateHtml = $("#sortable").html();
            });          
        }
    });

});

    </script>
    <style type="text/css">
    #sortable li{
        clear:both;
        float:left;
    }

    #droppable {
        clear:both;
        height:300px;
        width:400px;
        background-color:#CCC;
    }
    #droppable.active {
        background-color:#CFC;
    }
    #droppable.hovered {
        background-color:#CCF;
    }
    </style>

</head>
<body>

<ul id="sortable">
<li id="one">One</li>
<li id="two">Two</li>
<li id="three">Three</li>
<li id="four">Four</li>
<li id="five">Five</li>
<li id="six">Six</li>
</ul>

<div id="droppable">
Drop Here
</div>

</body>

Colin 20.01.2010

arrow_upward
0
arrow_downward

Удалось получить аналогичный конечный результат, сделав каждый из целевых DIV своими собственными сортируемыми элементами.

Затем я с помощью connectWith сделал так, чтобы все сортируемые объекты могли подключаться и совместно использовать перетаскиваемые объекты.

Что-то типа:

var connects = '#main_sortable, div.target';
$('#main_sortable').sortable({ connectWith: connect });
$('div').sortable({ connectWith: connect} );

mikeycgto 02.05.2011

arrow_upward
0
arrow_downward

Если вы можете разрешить сортировку других выпадающих областей, вы можете использовать параметр connectWith с общим селектором:

<div id="droppable1" class="droppable-area"></div>
<div id="droppable2" class="droppable-area"></div>
<div id="droppable3" class="droppable-area"></div>

тогда ваш код jQuery будет таким:

$('.droppable-area').sortable({ connectWith: '.droppable-area' });

В любом случае это решение прекрасно сработало для меня.

Steven Hunt 24.01.2013

jQuery с возможностью сортировки и удаления

Ответы (6)

Похожие вопросы