GoJs mouseDragEnter für externe HTML-Objekt

Question

Ich habe eine HTML-Pallete.

Wie in htmlDragDrop Probe.

Ich muss mouseDragEnter-Ereignis auf Diagrammknoten erfassen, wenn ich html Objekt darüber ziehen.

Ist es möglich?

Answer 1

Hier ist eine aktualisierte Version des Beispiels http://gojs.net/latest/samples/htmlDragDrop.html, das stationäre Knoten während des Drag & Drop hervorhebt. HTML und CSS sind unverändert.

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" } 
], 
[ ]); 

}