كيفية عدم السماح بـ "var Drag" اعتمادًا على "مربع الاختيار" المحدد؟

Question

موتولز:كيفية السماح وعدم السماح var drag .اعتمادا علي checkbox التحقق أم لا؟

window.addEvent('domready',function() {
  var z = 2;
  $$('#dragable').each(function(e) {
    var drag = new Drag.Move(e,{
      grid: false,
      preventDefault: true,
      onStart: function() {
        e.setStyle('z-index',z++);
      }
    });
  });
});
function check(tag){
  if(tag.checked){
    //checkbox checked
    //How to Disallow Drag.Move for #dragable ?
    //Unfortunately so it does not work - drag.destroy(); drag.removeEvents();
  }else{
    //How to Allow Drag.Move for #dragable ?
  }
}
<input type="checkbox" onClick="check(this);">
<div id="dragable">Drag-able DIV</div>

Answer 1

قم بتخزين مثيل Drag في مو تولز متجر العناصر لذلك عند النقر فوق مربع الاختيار، يمكننا استرداد هذا المثيل ومعالجته.

اسحب.تحرك هو امتداد للقاعدة يجر class، وإذا رأيت المستندات، ستلاحظ أن لديها طريقتين لهذه الحالة:

• يربط
• فصل

تحتاج إلى استدعاء هذه الأساليب على كائن السحب الذي يتم إنشاؤه عند الاتصال new Drag.Move(..) لتمكين السحب أو تعطيله.

لذا قم أولاً بإنشاء كائن السحب كما تفعل بالفعل:

var drag = new Drag.Move(e, {
    ...
});

ثم قم بتخزين مرجع لهذا drag كائن داخل Element Store لاسترجاعه لاحقًا.

e.store('Drag', drag);

يمكنك استخدام أي مفتاح تريده هنا - لقد استخدمته "Drag".

ثم لاحقًا في وظيفة التحقق، قم باسترداد كائن السحب، ثم اتصل به attach أو detach عليه اعتمادا على حالة خانة الاختيار.

function check(elem) {
    var drag = elem.retrieve('Drag'); // retrieve the instance we stored before

    if(elem.checked) {
        drag.detach(); // disable dragging
    }
    else {
        drag.attach(); // enable dragging
    }
}

انظر الخاص بك مثال تعديل للعمل هذا مربع الاختيار.

في ملاحظة جانبية، إذا كنت تقوم باسترداد عنصر بواسطة المعرف، فلن تحتاج إلى استخدامه $$ من الناحية المثالية يجب أن يكون هناك عنصر فقط بهذا المعرف. $$("#dragable") هو مجرد زائدة عن الحاجة وأقل أداء.يستخدم document.id('dragable') أو $("dragable") بدلاً من.