سحب وإفلات jQuery باستخدام الأحداث المباشرة

Question

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

لقد كنت أستخدم المكوّن الإضافي القابل للسحب لـ jQuery UI، ولكنه بطيء في الإضافة إلى أكثر من 400 عنصر قائمة، ويجب إعادة إضافته في كل مرة تتم فيها إضافة عناصر قائمة جديدة.

هل يعرف أي شخص مكونًا إضافيًا مشابهًا للمكون الإضافي القابل للسحب لـ jQuery UI والذي يستخدم jQuery 1.3 .live() الأحداث؟وهذا من شأنه أن يحل كلا المشكلتين.

Answer 1

وحل فويتك وعملت تماما بالنسبة لي. أنا أنهى تغييره صبي قليلا لجعله تمديد مسج ...

(function ($) {
   $.fn.liveDraggable = function (opts) {
      this.live("mouseover", function() {
         if (!$(this).data("init")) {
            $(this).data("init", true).draggable(opts);
         }
      });
      return this;
   };
}(jQuery));

والآن بدلا من استدعاء منها مثل:

$(selector).draggable({opts});

... مجرد استخدام:

$(selector).liveDraggable({opts})

Answer 2

وهذا هو عينة من التعليمات البرمجية التي عملت تماما بالنسبة لي

$('.gadgets-column').live('mouseover',function(){
    $(this).draggable();
});

Answer 3

هل يمكن أن تجعل المجمع وظيفة مثل هذا:

function liveDraggable(selector, options){
  jQuery(selector).live("mouseover",function(){
    if (!jQuery(this).data("init")) {
      jQuery(this).data("init", true);
      jQuery(this).draggable(options);
    }
  });
}

و(I استخدام النموذج مع مسج - وهذا هو السبب في أنني وضعت مسج () بدلا من $ ())

والآن بدلا من $ (محدد) .draggable ({} الأراضي الفلسطينية المحتلة) استخدام liveDraggable (محدد، {الأراضي الفلسطينية المحتلة})

Answer 4

كود

وStldoug وعملت بالنسبة لي، ولكن ليس هناك حاجة للحفاظ على فحص .data للعنصر ( "الحرف الأول") على كل حال تمرير الماوس. أيضا، فإنه من الأفضل استخدام "mousemove"، إذ أن "تمرير الماوس" لا تحصل دائما على تشغيلها إذا كان الماوس الخاص بك هو بالفعل أكثر من عنصر عندما جزاء وظيفة .live في.

(function ($) {
    $.fn.liveDraggable = function (opts) {
        this.live("mousemove", function() {
            $(this).draggable(opts);
        });
    };
}(jQuery));

إليك كيفية استخدامه:

$('.thing:not(.ui-draggable)').liveDraggable();

وهو خدعة لإضافة ": لا (.ui القابل للسحب)" لمحدد الخاص بك. منذ مسج سيضيف تلقائيا الطبقة "، واجهة المستخدم القابل للسحب" لعنصر الخاص بك عندما يصبح قابل للسحب، فإن وظيفة .live لم تعد تستهدف ذلك. وبعبارة أخرى، فإنه يطلق مرة واحدة فقط، على عكس الحل الآخر الذي يطلق مرارا وتكرارا وأنت تتحرك الأشياء حولها.

ومن الناحية المثالية، هل يمكن أن مجرد .unbind و"mousemove"، ولكن هذا لا يعمل مع .live، للأسف.

Answer 5

الجمع بين أفضل الإجابات من @john وjasimmk:

استخدام .live:

$('li:not(.ui-draggable)').live('mouseover',function(){
    $(this).draggable(); // Only called once per li
});

.live تم إهماله بالرغم من ذلك، من الأفضل استخدامه .on:

$('ul').on('mouseover', 'li:not(.ui-draggable)', function(){
    $(this).draggable();  // Only called once per li
});

كما أوضح @ جون، .ui-draggable تتم إضافتها تلقائيًا إلى الطرق القابلة للسحب، لذلك من خلال استبعاد تلك الفئة باستخدام المحدد، فإنك تضمن أن السحب القابل () سيتم استدعاؤه مرة واحدة فقط على كل عنصر.واستخدام .on سوف يقلل من نطاق المحدد، وتحسين الأداء.

Answer 6

وعلى سبيل المثال:

والتركية:

<div id="diyalogKutusu">
    <div id="diyalog-baslik">..baslik..</div>
    <div id="icerik">..icerik..</div>
</div>

$(document).on("mouseover", "#diyalogKutusu", function() {
    $(this).draggable({ handle: '#diyalog-baslik' });
});

---

والإنجليزية:

<div id="dialogBox">
    <div id="dialogBox-title">..title..</div>
    <div id="content">..content..</div>
</div>

$(document).on("mouseover", "#dialogBox", function() {
    $(this).draggable({ handle: '#dialogBox-title' });
});

ملحوظة: يمكنك استخدام on() بدلا من live() أو delegate. وon() ديها الأداء الجيد من غيرها

Answer 7

$("html divs to drag").appendTo("#layoutDiv").draggable(options);

JSFiddle

Answer 8

والسؤال القديم. لكن threedubmedia ديه السحب والإسقاط المساعد مع العيش (اعتبارا من الخامس 1.7 المعروف باسم ببساطة "على") الدعم. http://threedubmedia.com/code/event/drop لم تستخدم لذلك بكثير لذلك لا يمكن حساب ذلك الأداء، وما إلى ذلك ولكن يبدو أمرا معقولا.

Answer 9

وثمة خيار آخر هو مزيج معالج مرر الفأرة فوق مع فئة قابلة للإزالة، كما يلي:

$('.outer-container').on('mouseover', '.my-draggable.drag-unbound', function(e) {
  $(this).draggable().removeClass('drag-unbound');
});

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

Answer 10

ان النسخة المحدثة التي لا تستخدم العيش كما هو مهمل:

function liveDraggable(selector, options) {
    $(document).on('mouseover', selector, function () {
        if (!$(this).data("init")) {
            $(this).data("init", true);
            $(this).draggable(options);
        }
    });
}