外部 html 对象的 GoJs mouseDragEnter

Question

我有一个html托盘。

与 htmlDragDrop 示例相同。

当我将 html 对象拖到图表节点上时，我需要捕获图表节点上的 mouseDragEnter 事件。

可能吗？

Answer 1

这是 http://gojs.net/latest/samples/htmlDragDrop.html 示例的更新版本，它在拖放过程中突出显示了固定节点。 HTML 和 CSS 不变。

function init() {

// *********************************************************
// First, set up the infrastructure to do HTML drag-and-drop
// *********************************************************

var dragged = null; // A reference to the element currently being dragged

// highlight stationary nodes during an external drag-and-drop into a Diagram
function highlight(node) {  // may be null
  var oldskips = myDiagram.skipsUndoManager;
  myDiagram.skipsUndoManager = true;
  myDiagram.startTransaction("highlight");
  if (node !== null) {
    myDiagram.highlight(node);
  } else {
    myDiagram.clearHighlighteds();
  }
  myDiagram.commitTransaction("highlight");
  myDiagram.skipsUndoManager = oldskips;
}

// This event should only fire on the drag targets.
// Instead of finding every drag target,
// we can add the event to the document and disregard
// all elements that are not of class "draggable"
document.addEventListener("dragstart", function(event) {
  if (event.target.className !== "draggable") return;
  // Some data must be set to allow drag
  event.dataTransfer.setData("text", "");

  // store a reference to the dragged element
  dragged = event.target;
  // Objects during drag will have a red border
  event.target.style.border = "2px solid red";
}, false);

// This event resets styles after a drag has completed (successfully or not)
document.addEventListener("dragend", function(event) {
  // reset the border of the dragged element
  dragged.style.border = "";
  highlight(null);
}, false);

// Next, events intended for the drop target - the Diagram div

var div = document.getElementById("myDiagramDiv");
div.addEventListener("dragenter", function(event) {
  // Here you could also set effects on the Diagram,
  // such as changing the background color to indicate an acceptable drop zone

  // Requirement in some browsers, such as Internet Explorer
  event.preventDefault();
}, false);

div.addEventListener("dragover", function(event) {
  // We call preventDefault to allow a drop
  // But on divs that already contain an element,
  // we want to disallow dropping

  if (this === myDiagram.div) {
    var can = event.target;
    var pixelratio = window.PIXELRATIO;

    // if the target is not the canvas, we may have trouble, so just quit:
    if (!(can instanceof HTMLCanvasElement)) return;

    var bbox = can.getBoundingClientRect();
    var bbw = bbox.width;
    if (bbw === 0) bbw = 0.001;
    var bbh = bbox.height;
    if (bbh === 0) bbh = 0.001;
    var mx = event.clientX - bbox.left * ((can.width / pixelratio) / bbw);
    var my = event.clientY - bbox.top * ((can.height / pixelratio) / bbh);
    var point = myDiagram.transformViewToDoc(new go.Point(mx, my));
    var curnode = myDiagram.findPartAt(point, true);
    if (curnode instanceof go.Node) {
      highlight(curnode);
    } else {
      highlight(null);
    }
  }

  if (event.target.className === "dropzone") {
    // Disallow a drop by returning before a call to preventDefault:
    return;
  }

  // Allow a drop on everything else
  event.preventDefault();
}, false);

div.addEventListener("dragleave", function(event) {
  // reset background of potential drop target
  if (event.target.className == "dropzone") {
    event.target.style.background = "";
  }
  highlight(null);
}, false);

// handle the user option for removing dragged items from the Palette
var remove = document.getElementById('remove');

div.addEventListener("drop", function(event) {
  // prevent default action
  // (open as link for some elements in some browsers)
  event.preventDefault();

  // Dragging onto a Diagram
  if (this === myDiagram.div) {
    var can = event.target;
    var pixelratio = window.PIXELRATIO;

    // if the target is not the canvas, we may have trouble, so just quit:
    if (!(can instanceof HTMLCanvasElement)) return;

    var bbox = can.getBoundingClientRect();
    var bbw = bbox.width;
    if (bbw === 0) bbw = 0.001;
    var bbh = bbox.height;
    if (bbh === 0) bbh = 0.001;
    var mx = event.clientX - bbox.left * ((can.width/pixelratio) / bbw);
    var my = event.clientY - bbox.top * ((can.height/pixelratio) / bbh);
    var point = myDiagram.transformViewToDoc(new go.Point(mx, my));
    myDiagram.startTransaction('new node');
    myDiagram.model.addNodeData({
      location: point,
      text: dragged.textContent,
      color: "lightyellow"
    });
    myDiagram.commitTransaction('new node');

    // remove dragged element from its old location
    if (remove.checked) dragged.parentNode.removeChild(dragged);
  }

  // If we were using drag data, we could get it here, ie:
  // var data = event.dataTransfer.getData('text');
}, false);

// *********************************************************
// Second, set up a GoJS Diagram
// *********************************************************

var $ = go.GraphObject.make;  // for conciseness in defining templates

myDiagram = $(go.Diagram, "myDiagramDiv",  // create a Diagram for the DIV HTML element
              {
                initialContentAlignment: go.Spot.Center,
                "undoManager.isEnabled": true
              });
window.PIXELRATIO = myDiagram.computePixelRatio(); // constant needed to determine mouse coordinates on the canvas

// define a simple Node template
myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    { locationSpot: go.Spot.Center },
    new go.Binding('location'),
    $(go.Shape, "Rectangle",
      { fill: 'white' },
      // Shape.fill is bound to Node.data.color
      new go.Binding("fill", "color"),
      // this binding changes the Shape.fill when Node.isHighlighted changes value
      new go.Binding("fill", "isHighlighted", function(h, shape) {
        if (h) return "red";
        var c = shape.part.data.color;
        return c ? c : "white";
      }).ofObject()),  // binding source is Node.isHighlighted
    $(go.TextBlock,
      { margin: 3, font: "bold 16px sans-serif", width: 140, textAlign: 'center' },
      // TextBlock.text is bound to Node.data.key
      new go.Binding("text"))
  );

// but use the default Link template, by not setting Diagram.linkTemplate

// create the model data that will be represented by Nodes and Links
myDiagram.model = new go.GraphLinksModel(
[
  { text: "Alpha", color: "lightblue" },
  { text: "Beta", color: "orange" },
  { text: "Gamma", color: "lightgreen" },
  { text: "Delta", color: "pink" }
],
[ ]);

}

外部 html 对象的 GoJs mouseDragEnter

GoJs mouseDragEnter for external html object

gojs