استخدم Dojo سحب وسرعان مع Dojo Movable

Question

أنا أستخدم dojo.dnd لنقل العناصر بين المناطق. المشكلة هي: العناصر ستنطلق في مكانها بمجرد إسقاطها ، لكنني أود أن أبقى فيها حيث أسقطها ، ولكن فقط لمنطقة واحدة.

إليك رمز صغير لشرح هذا بشكل أفضل:

  <div id="dropZone" class="dropZone">
    <div id="itemNodes"></div>
    <div id="targetZone" dojoType="dojo.dnd.Source"></div>
  </div>

"Dropzone" هو div يحتوي على اثنين dojo.dnd.Source-areas ، "itemnodes" (تم إنشاؤها برمجيا) و "TargetZone". يجب سحب العناصر (divs مع الصور) من قائمة بسيطة من "itemnodes" إلى "TargetZone" والبقاء حيث يتم إسقاطها. بمجرد سحبها من "TargetZone" ، يجب عليهم العودة إلى القائمة داخل "itemnodes".

إليك الرمز الذي أستخدمه لإنشاء العناصر:

  var nodelist = new dojo.dnd.Source("itemNodes");
  {Smarty-Loop}
    nodelist.insertNodes(false, ['<img class="dragItem" src="{$items->info.itemtext}" alt="{$items->info.itemtext}" border="0" />']);
  {/Smarty-Loop}

لكن بهذه الطريقة لدي فقط قائمتين من العناصر ، لن تبقى العناصر التي تم إسقاطها في "TargetZone" حيث أسقطتها. لقد جربت حلقة dojo.query(".dojoDndItem").forEach(function(node) للاستيلاء على جميع العناصر وتغييرها إلى نوع "متحرك":

• استخدام dojo.dnd.move.constrainedMoveable سوف يغير العناصر حتى يتمكنوا من ذلك دائماً يتم نقلها (حتى في "itemnodes")
• استخدام dojo.dnd.move.boxConstrainedMoveable إن تحديد "الصندوق" إلى حدود "TargetZone" يجعل من الممكن تحريك العناصر الموجودة داخل "TargetZone" ، ولكن بمجرد أن أسقطها ، لا يمكنني الاستيلاء عليها وإعادتها للخارج. (غريب: dojo.connect(node, "onMoved" لا يعمل هنا ، حتى لن يطلق النار ، بغض النظر عن ماذا.)

إذن هذا هو السؤال: هل من الممكن إنشاء اثنين من dnd.sources حيث يمكنني نقل العناصر ذهابًا وإيابًا والسماح للعناصر "بنقل" فقط في أحد المصادر؟
أم أن هناك حلًا مثل جعل العناصر متحركة ، وإذا لم يتم إسقاطها إلى "TargetZone" ، فسيتم العودة إلى القائمة في "itemNodes" تلقائيًا؟

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

أي تلميح هو موضع تقدير.

تحياتي ، Select0r

Answer 1

لا يوجد دعم مباشر لمثل هذه الميزات. يمكن القيام به برمز مخصص ، على سبيل المثال ، عن طريق التصنيف الفرعي أ Source والتغلب على insertNodes().

Answer 2

إليك حلًا سريعًا للحصول على هذا العمل:

انتهى بي الأمر باستخدام Div واحد فقط وهو ملف dojo.dnd.Source ويحتوي على العناصر التي يجب إسقاطها في "Dropzone" وتحركت فيها أثناء العودة إلى قائمة العناصر عند وضعها خارج Dropzone.

جميع العناصر هي dojo.dnd.move.parentConstrainedMoveable لجعلها متحركة في div الأصلي. التواصل مع onMoveStop سوف تعطيني الفرصة لتحديد ما إذا كان "الإسقاط" قد حدث في Dropzone أو في مكان آخر.

  if (coordX >= (dropCoords.l + dropAreaX)  &&
      coordX <= (dropCoords.l + dropAreaX + dropAreaW) &&
      coordY >= (dropCoords.t + dropAreaY) &&
      coordY <= (dropCoords.t + dropAreaY + dropAreaH))
  {
     // OK!
  }
  else
  {
    // outside, snap back to list
  }

dropAreaX و dropAreaY تحتوي على الإحداثيات التي تبدأ فيها Dropzone ، dropAreaW و dropAreaH تحتوي على عرضها وارتفاعها.

إذا "OK!" ، سيتم حفظ العناصر في صفيف ، لذلك أعرف العناصر التي تم إسقاطها. وإلا فإن العنصر ستتم إزالة هذا الصفيف (إذا كان هناك) وسيتم وضع العنصر مرة أخرى في القائمة (عبر CSS "Left: 0"). سيخبرني عدد العناصر الموجودة في الصفيف بعدد العناصر المتبقية في القائمة ، لذلك يمكنني "تكديس" في حلقة باستخدام "TOP: NumberOfElement * Heightofelement PX").

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