svg 요소를 HTML 요소 위로 끌기

Question

svg 요소를 HTML 요소로 끌어오고 싶습니다. 어떤 스마트 방법으로 그렇게 할 수 있는지 잘 모릅니다.

그러나 내 방법이 더럽다고 생각하지만 d3.behavior.drag() 및 d3의 드래그 기능을 사용하여 svg 요소에서 끌기를 시작할 수 있다고 생각합니다. 사본을 복제하려고합니다 (제발 생각해보십시오). 단순히 circle 객체) jquery UI가 드래그 이벤트를 처리하도록합니다. 문제는 새로 생성 된 jquery 요소에서 드래그 이벤트를 트리거하는 방법을 모른다는 것입니다.

var drag= d3.behavior.drag() 
    .on("drag", function(d) { 
     // make a Clone html object .dragging-node 

     $('.dragging-node').attr('draggable', true); 
     $('.dragging-node').trigger('dragstart'); 

    }); 
var node = vis.selectAll("g.node") 
      .data(nodes) 
      .enter().append("svg:g") 
      .attr("class", "node") 
      .call(drag); 

이 새로 만든 복제 개체에 대해 드래그를 시작하는 방법에 대한 아이디어가 있으십니까? 또는 내가 원하는 것을 얻는 더 똑똑한 방법이 있습니까?

도움이 될 것입니다.

Answer 1

나는 이런 식으로 한 번 해봤지만 간단한 작업에서는 괜찮 았지만 얼마 지나지 않아 jQueryUI의 Draggable을 사용하는 것이 더 강력 해 졌으므로 이제는 더 건강 해졌다. 또한 Droppable 기능을 함께 사용해야했습니다. 어쩌면 당신의 요구가 덜 까다 롭습니다. 그렇다면 :

복제 된 요소 (jQueryUI의 드래그 가능한 용어로 "드래그 도우미"라고도 함)에서 이벤트를 인위적으로 트리거 할 필요가 없습니다. 대신 드래그를 시작한 요소에서 이벤트가 계속 트리거되고 드래그 동작이 적용되지만 도우미 위치가 업데이트됩니다. 이 같은

뭔가 :

// Helper is the cloned element, which doesn't exist until dragging begins 
// (alternatively it could pre-exist but be hidden) 
var $helper = null 

// the parent container of $helper, 
// which presumably is outside of the SVG 
var $helperParent = $('body') 

var drag = d3.behavior.drag() 
    .on("dragstart", function(d) { 
    $helper = ... // somehow make the cloned helper, on dragstart (not on drag) 
     .appendTo($helperParent) 
    }) 
    .on("drag", function(d) { 
    // determine the mouse position relative to the helper's parent 
    // (not relative to the SVG element that initiated the drag) 
    mousepos = d3.mouse($helperParent[0]) 

    // update the helper's position 
    $helper.css({ 
     left: mousepos[0], 
     top: mousepos[1] 
    }); 
    }) 
    .on("dragend", function(d) { 
    // remove (or hide) the helper 
    $helper.remove(); 
    });