"Mevcut kutuları", kullanıcıların kutuları "Kutular" listesi. onların" liste "mevcut onları sürükleyerek kutu al bir listesi var burada bir tasarım var

Kullanıcılar daha sık bitirdikten sonra bir kerede birden fazla kutuları (max 20), daha onları sürükle kutuları ile geri "mevcut kutuları" iade etmek için liste.

jQuery sıralanabilir beni kullanıcı açısından istenmeyen bir durum, bir seferde bir kutu sürüklemek için izin verir. Bu sorun için basit bir çözüm ile gelip yapamaz oldum.

UI farklı bir yöntem ile, tamamen iyi olabilir, ama önce herkes bu başarılı olabileceği konusunda herhangi bir öneriniz var mı?

Teşekkürler!

Çalışma Çözüm

tl;dr: 8**.

Her yerde bu sorun için bir çözüm aradımbirden fazla sürükleme bağlı bir sıralanabilir içine sıralanabilir öğeleri seçilmişbu cevaplar bulabildiğim en iyi idi , ve.

Ancak...

Kabul cevabı adamcağız@Shanimal's answer bulunurama tam değil tam. @Shanimal kod aldım ve bunun üzerine inşa edilmiş.

Ben sabit:

• ** 10
• HTML sözdizimi hataları (kapanış etiketleri eksik & <li/>s iç içe) temizledim.

Ekledi:

• DoğruCtrl tıklatın(yaCmd ' ı tıklatıneğer mac) birden çok öğe seçmek için destek. TıklatarakolmadanCtrlanahtarı tutan öğe seçili neden olur, ve aynı listedeki diğer öğeleri olabilirseçilmemiş. Bu jQuery UI Selectable() widget fark Selectable() mousedrag bir seçim sahip olmak gibi tıklatın davranıştır.

Fiddle

HTML:

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>
<ul>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
</ul>

JavaScript (jQuery ve jQuery UI ile):

$("ul").on('click', 'li', function (e) {
    if (e.ctrlKey || e.metaKey) {
        $(this).toggleClass("selected");
    } else {
        $(this).addClass("selected").siblings().removeClass('selected');
    }
}).sortable({
    connectWith: "ul",
    delay: 150, //Needed to prevent accidental drag when trying to select
    revert: 0,
    helper: function (e, item) {
        var helper = $('<li/>');
        if (!item.hasClass('selected')) {
            item.addClass('selected').siblings().removeClass('selected');
        }
        var elements = item.parent().children('.selected').clone();
        item.data('multidrag', elements).siblings('.selected').remove();
        return helper.append(elements);
    },
    stop: function (e, info) {
        info.item.after(info.item.data('multidrag')).remove();
    }

});

NOT:

Bu ben yayınlanmıştır beri, çoklu seçim özelliği olan bir şey simmilar - sıralanabilir listesi için sürüklenebilir öğeleri bağlayan, hayata. JQuery UI widget çok benzer olduğundan neredeyse tamamen aynı ayarlayın. Bir UI ipucu delay parametre draggables veya selectables için ayarlanmış olduğundan emin olmak için, tıklayın sürükleyin başlatma olmadan birden fazla öğe seçmek için. O zaman sana bir yardımcı yapısıdırgörünüyortüm seçili öğeleri birleştirerek yeni bir öğe, seçili öğeleri çoğaltmak ve onları ekleyin) koyun gibi, amaemin olunorijinal maddenin olduğu gibi bırakın (aksi takdirde bu kadar işlevlerini tam olarak neden söyleyemem, ama sinir bozucu DOM İstisnalar bir sürü gerektirir vida).

Ben de eklediSeçbu yerel masaüstü uygulamaları gibi daha fazla işlev için işlev. Daha detaylı açıklamak, böylece bir blog başlatmak zorunda kalabilirim :-)