مساعدة مسج: القابل للسحب لللفرز ومن ثم العودة إلى القابل للسحب مرة أخرى

Question

ولدي مجموعة من العناصر في القائمة السحب التي يتصل بها للفرز باستخدام الخيار connectToSortable. الآن أريد أن إزالة بعض العناصر من هذه القائمة فرزها ونقلها مرة أخرى إلى قائمة السحب. نوع من مثل التراجع. لنفترض أن المستخدم بتحريك بعض البنود 5 الى قائمة فرز ويقرر انه / انها تريد فقط 4 بنود، وتقرر أن مجرد سحب هذا البند غير المرغوب فيه من sortlist إلى قائمة السحب. كيف يمكنني تحقيق ذلك دون إضافة وصلة "إزالة" في القائمة نوع. شكرا جزيلا. لمزيد من المعلومات يرجى الرجوع إلى <لأ href = "http://the-stickman.com/web-development/javascript/jquery-dropping-items-from-a-draggable-list-to-a-sortable-list/" يختلط = "نوفولو noreferrer"> http://the-stickman.com/web-development/javascript/jquery-dropping-items-from-a-draggable-list-to-a-sortable-list/

Answer 1

مسج UI سبيل المثال يبدو مثل ما كنت بعد. ويضم اثنين من قائمة متصلة ويمكن للمستخدم سحب العناصر بينهما.

ولكن أظن أن السيناريو الخاص بك لا يطابق المثال. دعونا نقول لديك قائمة السحب، قدم UL مع كل LI القابل للسحب وربطها UL آخر قدم للفرز (راجع <لأ href = "http://jqueryui.com/demos/draggable/#sortable" يختلط = "noreferrer" > هذا الرابط للحصول على مثال). في كل مرة تقوم بسحب شيء من القائمة السحب، ويستخدم نسخة من العنصر جر. استخدام "خارج" الحدث، يمكنك تسجيل عندما تستمر واحد عنصر خارج قائمة للفرز وإذا كان هذا البند هو لا يزال خارج عندما يتم تشغيل الحدث "وقف"، إزالته من للفرز. باستخدام ui.position وui.offset خصائص القطعة للفرز، يمكنك تحديد ما إذا كان سحب هذا البند على قائمة السحب قبل إزالة الواقع عنصر من للفرز.

وآمل أن يساعد هذا.

Answer 2

وأعتقد أن أبسط الحلول هو جعل حياتك قائمة القابل للسحب droppable أيضا، والتعامل مع هذا الحدث الهبوط. لدي #priority_articles_list كما للفرز وli.article كما graggable، فهي داخل #articles. في حالة أبسط يمكنك الاتصال فقط ui.draggable.remove();، التي ينبغي أن تفعل خدعة.

$("#articles").droppable({
  accept: '#priority_articles_list > li',

  drop: function(ev, ui) {
    draggable_id = "#" + ui.draggable.attr("id").replace("priority_", "");
    $(draggable_id).removeClass("shouldnt_drag");
    ui.draggable.remove();
    if ($("#priority_articles_list").children("li").length == 1) {
      $("#priority_articles p").show();
    }
  }
});