قوائم فرز متصلة

Question

أنا أعمل مع قوائم قابلة للنقل المتصلة وتحتاج إلى القدرة على إضافة قائمة إضافية، لكنها لا تعمل فقط.

لدي XHTML مثل هذا:

<div id="content">
   <div class="line">
        <span class="element">1</span>
        <span class="element">2</span>
        <span class="element">3</span>
   </div>
   <div class="line">
        <span class="element">4</span>
        <span class="element">5</span>
        <span class="element">6</span>
   </div>
</div>

حيث يجب أن تكون العناصر قابلة للتنزيف، وتتمكن المستخدم من تغييرها من واحدة. ولكن عند الفرز، يجب إضافة خط إضافي فارغ، في حالة يريد المستخدم وضع عنصر في سطر جديد.

حاولت إضافة div.line إلى محتوى DIV #، ولكن لا يمكن إسقاط العناصر هناك.

اي فكرة؟

شكرا!

Answer 1

هذا يجب أن يفعل ما تريد. ولكن حقا غير تافهة ومصممة بشدة للتعامل مع العلامات بالضبط مثل تلك التي قدمتها. إذا كنت لا تفهم هذا أو لا يعمل لك نشر تعليق.

تحقق هنا للحصول على مظاهرة سريعة http://jsbin.com/uhoga. (http://jsbin.com/uhoga/edit. للحصول على الكود)

//pseudo unique id generator
var uid = 0;

function starter() {
    var lines = $("div.line");
    var len = lines.size();
    //insert empty div.line at end with "unique" id
    lines.eq(len-1).after("<div class='line' id='line"+uid+"' />");
    //make it a sortable too
    $('#line'+uid).sortable({
        //connect with other div.lines which don't have same id
        connectWith: 'div.line:not([id=line'+uid+'])',
        start: starter,
        stop: stopper,
        //needed to stop some "flickering"
        appendTo: 'div.line[id=line'+uid+']',
        items: 'span.element'
    });
    uid++;
    //refresh this sortable so it sees the newly inserted as possible "target"
    $(this).sortable('refresh');
}

function stopper() {
    //remove all div.lines which are empty (have no span.element children)
    $("div.line:not(:has(> span.element))").remove();
}

//initial setup
$("div.line").each(function(i, ele) {
    var jEle = $(ele);
    //assuming the initially present div.line elements have no id
    jEle.attr("id", "line"+uid);
    jEle.sortable({
        connectWith: 'div.line:not([id=line'+uid+'])',
        start: starter,
        stop: stopper,
        //needed to stop some "flickering"
        appendTo: 'div.line[id=line'+uid+']',
        items: 'span.element'
    });
    uid++;
});