खींचने और छोड़ने लायक

खींचने और छोड़ने लायक, रेंडर किया गया ऐसा ऑब्जेक्ट होता है जो फ़ाइल फ़ोल्डर में मौजूद होता है. इसे खींचकर छोड़ा जा सकता है. वे IDraggable इंटरफ़ेस को लागू करते हैं.

ऐसा बहुत कम मामलों में होता है, जब आपको ड्रैग करने लायक कोई नया ब्लॉकली (जैसे कि एक से ज़्यादा विकल्प चुनने वाला प्लगिन या किसी मौजूदा ऑब्जेक्ट के ड्रैग हैंडल करने का तरीका बदलना) में बदलाव करना हो, क्योंकि आप रेंडर किए गए नए ऑब्जेक्ट को ब्लॉकली में नहीं जोड़ सकते. फ़ाइल फ़ोल्डर में रेंडर किए गए सिर्फ़ वे ऑब्जेक्ट हैं जो ब्लॉक, बबल, और फ़ाइल फ़ोल्डर की टिप्पणियां करते हैं.

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

ड्रैग प्रोसेस करते समय, ड्रैगेबल की कई ज़िम्मेदारियां होती हैं:

• svg एलिमेंट को ड्रैग लेयर में ले जाएं.
• svg एलिमेंट का अनुवाद करना.
• दूसरी जगह ले जाने वाले इवेंट ट्रिगर हो रहे हैं.

लागू करने का तरीका

ड्रैग करने लायक नया इंटरफ़ेस बनाने के लिए, आपको IRenderedElement और IDraggable इंटरफ़ेस लागू करने होंगे. इससे Blockly को पता चलता है कि आपका ऑब्जेक्ट दिख रहा है और उसे खींचा जा सकता है.

class MyDraggable extends IRenderedElement, IDraggable {}

रूट SVG एलिमेंट दिखाएं

getRootSvg तरीका, रूट svg एलिमेंट (आम तौर पर ग्रुप) दिखाता है, जिसमें ड्रैग करने लायक व्यू बनाने वाले दूसरे सभी एलिमेंट होते हैं.

getSvgRoot() {
  return this.rootSvg;
}

रिटर्न मूवेबिलिटी

isMovable तरीके से पता चलता है कि खींचकर छोड़ने लायक अभी एक जगह से दूसरी जगह ले जाया जा सकता है या नहीं (क्योंकि शायद आप किसी ऑब्जेक्ट को कुछ समय के लिए खींचने और छोड़ने की सुविधा बंद करना चाहें). अगर isMovable दिखाता है, तो false फ़ाइल फ़ोल्डर को खींचकर छोड़ा जाता है.

isMovable() {
  return true;
}

रिटर्न पोज़िशन

getRelativeToSurfaceXY तरीके से एक Coordinate मिलता है. यह फ़ंक्शन, ड्रैग किए जा सकने वाले आइटम के ऊपरी शुरुआती कोने की जगह के बारे में बताता है.

फ़ाइल फ़ोल्डर के निर्देशांकों का ऑरिजिन, वर्कस्पेस के सबसे बाईं ओर और सबसे ऊपर होता है. साथ ही, फ़ाइल फ़ोल्डर को स्केल करने या किसी दूसरी जगह ले जाने पर वे नहीं बदलते.

getRelativeToSurfaceXY() {
  return this.loc;
}

ड्रैग करना शुरू करें

startDrag वाला तरीका, ड्रैग करने लायक पर ड्रैग शुरू करता है. इस तरीके से, ड्रैग किए जा सकने वाले आइटम को ट्रांसफ़र नहीं किया जा सकता. हालांकि, आपको डेटा स्टोर करना चाहिए या ऐसा कोई भी ऑब्जेक्ट बनाना चाहिए जिसकी ज़रूरत हो और ड्रैग करने का काम पूरा हो. इसमें वह डेटा शामिल है जिसे revertDrag कॉल करने पर, ड्रैग को वापस लाना होगा.

साथ ही, svg एलिमेंट को फ़ाइल फ़ोल्डर की ड्रैग लेयर में भी बदल देना चाहिए, ताकि वे दूसरे एलिमेंट के ऊपर मौजूद रहें.

यह एक इवेंट भी लेता है, जिसका इस्तेमाल आप दबाई गई कुंजियों का पता लगाने के लिए कर सकते हैं. इससे (उदाहरण के लिए) आप किसी सामान्य ड्रैग से अलग शिफ़्ट होते समय ड्रैग का इस्तेमाल कर सकते हैं.

startDrag(e) {
  // Save the original location so we can revert the drag.
  this.startLoc = this.getRelativeToSurfaceXY();

  // Disable resizing the workspace for performance.
  this.workspace.setResizesEnabled(false);

  // Put the element on the drag layer.
  this.workspace.getLayerManager()?.moveToDragLayer(this);

  // Fire a drag event...

  // etc...
}

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

drag तरीका असल में, खींचने लायक ऑब्जेक्ट की जगह बदल देता है. newLoc, वर्कस्पेस कोऑर्डिनेट में है. एक इवेंट पास भी किया गया है. इसका इस्तेमाल, दबाई गई कुंजियों की जांच करने के लिए किया जा सकता है.

drag(newLoc, e) {
  this.moveTo(newLoc);
}

ड्रैग मोड को पहले जैसा करें

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

revertDrag() {
  // Move back to the position that was stored in `startDrag`.
  this.moveTo(this.startLoc);
}

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

endDrag वाला तरीका, ड्रैग किए गए डेटा या ऑब्जेक्ट को साफ़ करता है और ड्रैग किए जा सकने वाले डेटा को मूल लेयर पर वापस ले जाता है.

अगर revertDrag को कॉल किया जाता है, तो endDrag को हमेशा revertDrag के बाद कॉल किया जाता है.

endDrag() {
  // Put the element back on its original layer (in this case BLOCK).
  this.workspace
    .getLayerManager()
    ?.moveOffDragLayer(this, Blockly.layers.BLOCK);

  // Allow the workspace to start resizing again.
  this.workspace.setResizesEnabled(true);
}

चुनें

ड्रैग किए जाने वाले एलिमेंट का पता उस एलिमेंट से लगाया जाता है जिसे खींचकर छोड़ने का पता चलने पर वह चुना जाता है.

ISelectable

ड्रैग किए जा सकने वाले विज्ञापन को चुनने के लिए, ISelectable इंटरफ़ेस लागू करना होगा.

class MyDraggable implements ISelectable {
  constructor(workspace) {
    this.id = Blockly.utils.idGenerator.genUid();
    this.workspace = workspace;
  }

  select() {
    // Visually indicate this draggable is selected.
  }

  unselect() {
    // Visually indicate this draggable is not selected.
  }
}

चुनाव सेट करें

चुने गए एलिमेंट को Blockly.common.setSelected() पर कॉल करके सेट किया जा सकता है. आम तौर पर, उपयोगकर्ता के pointerdown इवेंट की वजह से ऐसा किया जा सकता है.

  constructor() {
    this.initSvg();

    Blockly.browserEvents.conditionalBind(
      this.getSvgRoot(),
      'pointerdown',
      this,
      () => Blockly.common.setSelected(this));
  }

इनके साथ काम करता है

आपका 'खींचें और छोड़ें' बटन अतिरिक्त इंटरफ़ेस लागू कर सकता है, ताकि यह Blockly में अन्य सिस्टम से इंटरैक्ट कर सके.

हटाने योग्य

IDeleteable इंटरफ़ेस का इस्तेमाल करके, ड्रैग किए जा सकने वाले आइटम को ट्रैशकैन या मिटाए गए अन्य टारगेट से मिटाया जा सकता है.

class MyDraggable implements IDeletable {
  isDeletable() {
    return true;
  }

  dispose() {
    // Dispose of any references to data or SVG elements.
  }

  setDeleteStyle() {
    // Visually indicate that the draggable is about to be deleted.
  }
}

कॉपी किया जा सकता है

ड्रैग किए जा सकने वाले को कॉपी करने और चिपकाने के लिए IPaster तय करने के लिए, ICopyable इंटरफ़ेस लागू किया जा सकता है.

कॉपी करके चिपकाने के बारे में ज़्यादा जानकारी के लिए, कॉपी करके चिपकाएं देखें.