ลากได้

รายการที่ลากได้คือออบเจ็กต์ที่แสดงผลซึ่งอยู่ในพื้นที่ทำงานซึ่งจะลากและวางได้ โดยใช้อินเทอร์เฟซ IDraggable

มีสถานการณ์น้อยมากที่คุณต้องการเพิ่มรายการที่ลากไปยัง Blockly ได้ (เช่น ปลั๊กอินmultiselect หรือเปลี่ยนวิธีจัดการกับการลากของออบเจ็กต์ที่มีอยู่) เนื่องจากคุณจะไม่สามารถเพิ่มออบเจ็กต์ที่แสดงผลใหม่ลงใน Blockly ได้ ออบเจ็กต์ที่แสดงผลเท่านั้นที่สามารถอยู่ในพื้นที่ทำงานได้ ได้แก่ บล็อก ลูกโป่ง และความคิดเห็นในพื้นที่ทำงาน

หน้าที่รับผิดชอบ

เครื่องมือลากจะมีหน้าที่รับผิดชอบหลายประการเมื่อใช้งานการลาก ดังนี้

• กําลังย้ายองค์ประกอบ 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 จะล้างการลาก ปล่อยข้อมูลหรือออบเจ็กต์ที่เก็บไว้ และส่งคืนรายการที่ลากได้ไปยังเลเยอร์เดิม

ระบบจะเรียก endDrag หลัง revertDrag เสมอหากมีการเรียก 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.
  }
}

คัดลอกได้

คุณสามารถใช้อินเทอร์เฟซ ICopyable เพื่ออนุญาตให้คัดลอกที่ลากได้ และกำหนด IPaster เพื่ออนุญาตให้วาง

ดูข้อมูลเพิ่มเติมเกี่ยวกับการคัดลอกและวางได้ที่คัดลอกและวาง