पसंद के मुताबिक ड्रैगर

ड्रैगर एक कंट्रोलर ऑब्जेक्ट होता है. यह उपयोगकर्ता के इंटरैक्शन के जवाब में, ड्रैग किए जा सकने वाले आइटम को खींचने और छोड़ने की सुविधा को कंट्रोल करता है.

बहुत कम मामलों में, आपको कस्टम ड्रैगर लागू करना पड़ सकता है. ऐसा इसलिए, क्योंकि ड्रैग करने की सुविधा को बहुत ज़्यादा कस्टमाइज़ नहीं किया जा सकता. scroll-options प्लग इन, एक कस्टम ड्रैगर लागू करता है, क्योंकि उसे वर्कस्पेस के किनारे पर स्क्रोलिंग जोड़नी थी. इससे पिक्सल निर्देशांक को वर्कस्पेस निर्देशांक में बदलने का तरीका बदल जाता है.

ज़िम्मेदारियां

खींचने और छोड़ने की कार्रवाई करते समय, खींचने वाले की कई ज़िम्मेदारियां होती हैं:

• खींचे और छोड़े जा सकने वाले आइटम पर, खींचने और छोड़ने के तरीके कॉल करना.
• Workspace के निर्देशांक में, उस जगह का हिसाब लगाना जहां खींचे और छोड़े जा सकने वाले आइटम को ले जाना है.
• कर्सर घुमाकर चुने गए किसी भी ड्रैग टारगेट पर, ड्रैग टारगेट के तरीके लागू करना.

लागू करना

कस्टम ड्रैगर बनाने के लिए, आपको IDragger इंटरफ़ेस लागू करना होगा.

class MyDragger implements IDragger {
  // Takes in the draggable being dragged and the workspace the drag
  // is occurring in.
  constructor(draggable, workspace);
}

आपके पास पहले से मौजूद Blockly.dragging.Dragger को सबक्लास के तौर पर इस्तेमाल करने का विकल्प भी है. यह पहले से ही बुनियादी ज़िम्मेदारियों को मैनेज करता है.

आइटम को खींचने और छोड़ने की सुविधा चालू करना

onDragStart तरीका, खींचने और छोड़ने की कार्रवाई शुरू करता है. इसमें, खींचने और छोड़ने की सुविधा को लागू करने के लिए ज़रूरी डेटा सेव होना चाहिए. यह startDrag को उस आइटम पर भी कॉल करना चाहिए जिसे खींचा जा रहा है.

ध्यान दें: हर 'खींचें और छोड़ें' कार्रवाई के लिए एक नया ड्रैगर बनाया जाता है. इसलिए, कुछ शुरुआती कार्रवाइयां (जैसे, शुरुआती जगह सेव करना) कंस्ट्रक्टर में की जा सकती हैं.

onDragStart(e) {
  this.startLoc = this.draggable.getRelativeToSurfaceXY();

  this.draggable.startDrag(e);
}

खींचें और छोड़ें

onDrag तरीका, खींचने और छोड़ने की कार्रवाई करता है. यह totalDelta के आधार पर, खींचे और छोड़े जा सकने वाले आइटम की नई वर्कस्पेस पोज़िशन का हिसाब लगाएगा. totalDelta, पिक्सल निर्देशांक में दिया गया होता है.

इससे, उन सभी ड्रैग टारगेट को भी अपडेट किया जाना चाहिए जिन पर कर्सर घुमाया जा रहा है.

• wouldDelete को हमेशा ड्रैग टारगेट पर मौजूद अन्य हुक को कॉल करने से पहले कॉल किया जाना चाहिए.
• नए ड्रैग टारगेट पर onDragEnter को कॉल करने से पहले, onDragExit को हमेशा पुराने ड्रैग टारगेट पर कॉल किया जाना चाहिए.
• onDragOver को तब कॉल किया जाना चाहिए, जब खींचें और छोड़ें टारगेट पर पहली बार कर्सर घुमाया गया हो. साथ ही, onDrag को हर उस कॉल पर कॉल किया जाना चाहिए जहां खींचें और छोड़ें टारगेट पर कर्सर अब भी घुमाया जा रहा हो.onDragEnter

onDrag(e, totalDelta) {
  // Update the draggable location.
  const delta = this.pixelsToWorkspaceUnits(totalDelta);
  const newLoc = Coordinate.sum(this.startLoc, delta);
  this.draggable.drag(newLoc, e);

  // Call wouldDeleteDraggable.
  if (isDeletable(this.draggable)) {
    this.draggable.setDeleteStyle(
      // Checks that the drag target is an `IDeleteArea` and calls `wouldDelete`
      // on it.
      this.wouldDeleteDraggable(e, this.draggable),
    );
  }

  const newDragTarget = this.workspace.getDragTarget(e);
  if (this.dragTarget !== newDragTarget) {
    // Call `onDragExit` then `onDragEnter`.
    this.dragTarget?.onDragExit(this.draggable);
    newDragTarget?.onDragEnter(this.draggable);
  }
  // Always call `onDragOver`
  newDragTarget?.onDragOver(this.draggable);
  this.dragTarget = newDragTarget;
}

आइटम को खींचने और छोड़ने की सुविधा बंद करना

onEndDrag विधि, आइटम को खींचने और छोड़ने की प्रोसेस को खत्म करती है. इससे, खींचे और छोड़े जा सकने वाले आइटम को यह सूचना मिलनी चाहिए कि खींचने की प्रोसेस पूरी हो गई है. साथ ही, खींचे और छोड़े जा सकने वाले आइटम पर कर्सर घुमाने पर, उस आइटम को यह सूचना मिलनी चाहिए कि खींचे और छोड़े जा सकने वाले आइटम को छोड़ दिया गया है. अगर खींचे और छोड़े जा सकने वाले आइटम को खींचकर मिटाने की जगह पर छोड़ा जाता है, तो उसे भी हटा दिया जाना चाहिए.

• onDrop को हमेशा दूसरे तरीकों से पहले कॉल किया जाना चाहिए.
• अगर खींचने और छोड़ने के टारगेट की वजह से, खींचने और छोड़ने की सुविधा काम नहीं करती है, तो revertDrag को कॉल किया जाना चाहिए.
• endDrag को ड्रैग को वापस लाने के बाद, लेकिन डिस्पोज करने से पहले कॉल किया जाना चाहिए.
• अगर खींचे और छोड़े गए आइटम को मिटाने के लिए चुना गया क्षेत्र टारगेट है, तो dispose को कॉल किया जाना चाहिए.

onDragEnd(e) {
  // Call `onDrop` first.
  const dragTarget = this.workspace.getDragTarget(e);
  if (dragTarget) {
    this.dragTarget?.onDrop(this.draggable);
  }

  // Then revert the drag (if applicable).
  if (this.shouldReturnToStart(e, this.draggable)) {
    this.draggable.revertDrag();
  }

  // Then end the drag.
  this.draggable.endDrag(e);

  // Then delete the draggable (if applicable).
  if (
    isDeletable(this.draggable) &&
    this.wouldDeleteDraggable(e, this.draggable)
  ) {
    this.draggable.dispose();
  }
}

रजिस्ट्रेशन

आपकी ड्रैगर क्लास को रजिस्टर करना ज़रूरी है, ताकि ड्रैग का पता चलने पर उसे बनाया जा सके.

// Note that the type is BLOCK_DRAGGER even though draggers drag more than
// blocks. The name is for backwards compatibility.
Blockly.registry.register(registry.Type.BLOCK_DRAGGER, 'MY_DRAGGER', MyDragger);

इस्तेमाल

कस्टम ड्रैगर लागू करने के बाद, उसे कॉन्फ़िगरेशन के विकल्पों में पास करके इस्तेमाल किया जा सकता है.

const myWorkspace = Blockly.inject('blocklyDiv', {
  plugins: {
    // Note that we pass this to blockDragger even though draggers drag more
    // than blocks. The name is for backwards compatibility.
    blockDragger: MyDragger,
  },
});