d3將鼠標事件發送給div子元素

嘗試拖放包含在div中的完整表單，問題在於保留子元素的默認行爲（這裏的文本輸入爲允許例如text-通過鼠標選擇）並限制dragstart到div＃dragme邊框部分。d3將鼠標事件發送給div子元素

詳細說明這裏 https://github.com/mbostock/d3/wiki/Drag-Behavior#on 如何保存的同時拖動的元素，一些意外的行爲，但我想在這裏相反沃爾德希望在這裏，這意味着（類似）的事件發送到div的孩子的和原因他們執行他們的默認行爲。

下面是代碼，請儘量選擇通過鼠標文本（或選擇通過DoubleClick整個文本），它不會」工作：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    <html> 
    <head> 
    <style> 
     div#dragme { 
       position: absolute; 
       overflow: hidden; 
       left: 20; 
       top: 20; 
       width: auto; 
       background: silver; 
       border: 15px solid rgba(0,0,0,0.5); 
       border-radius: 4px; padding: 8px; 
     } 
    </style> 
    </head> 
    <script src="d3.js"></script> 

    <div id="container" onclick="mouseclick(event)" > 
    </div> 

    <script> 
     elem = document.createElement("div"); 
     elem.id = 'content'; 
     elem.innerHTML = '<div draggable="true" id="dragme" class="resizeable"><input type="text" value="my text" /> </div>'; 
     document.body.insertBefore(elem,document.body.childNodes[0]); 

     function move(){ 
      console.log("target: "+ d3.event.target); 
      var dragTarget = d3.select(this); 
      dragTarget 
      .style("left", function(){return d3.event.dx + parseInt(dragTarget.style("left"))}) 
      .style("top", function(){return d3.event.dy + parseInt(dragTarget.style("top"))}); 
     }; 

     var node_drag = d3.behavior.drag() 
         .on("drag", move); 
     var nodes = d3.selectAll("#dragme"); 
     nodes.call(node_drag); 
    </script> 
    </body> 
    </html>

來源

2015-01-17 Mike75

你可以抑制元素的阻力：

function move() { 
    // if dragging on an input 
    if (d3.event.sourceEvent.target.nodeName === "INPUT") 
    return false; 
    var dragTarget = d3.select(this); 
    dragTarget 
    .style("left", function() { 
     return d3.event.dx + parseInt(dragTarget.style("left")) 
    }) 
    .style("top", function() { 
     return d3.event.dy + parseInt(dragTarget.style("top")) 
    }); 
};

編輯

以上沒有工作在IE，所以...

回到原來的移動功能：

function move() { 
    var dragTarget = d3.select(this); 
    dragTarget 
    .style("left", function() { 
     return d3.event.dx + parseInt(dragTarget.style("left")) 
    }) 
    .style("top", function() { 
     return d3.event.dy + parseInt(dragTarget.style("top")) 
    }); 
};

，並抑制輸入框移動事件：

var node_drag = d3.behavior.drag() 
    .on("drag", move); 
var nodes = d3.selectAll("#dragme"); 
nodes.call(node_drag); 

d3.select("#dragme > input").on("mousedown", function(){ 
    d3.event.stopPropagation(); 
});

例here。

來源

2015-01-17 14:19:49 Mark

文本的例子仍然是不可選最近解決了類似的問題。 – Mike75

@ Mike75，呃該死的IE，儘管在Chrome中工作，讓我再看看。 – Mark

@ Mike75，上面的新解決方案... – Mark

我通過一個文本添加鼠標懸停/鼠標移出處理程序打開父div的拖拽行爲和關閉，例如：

 var e = elem.find('textarea'); 
     e.on('mouseover', function(){ elem.draggable('destroy') }); 
     e.on('mouseout', function(){ elem.draggable() });

來源

2015-01-17 14:32:52

這應該放在哪裏？我把它放在 nodes.call（node_drag）; 並且它沒有改變行爲（輸入仍然不可選）另外我嘗試用find（'input'）而不是find（'textarea'）。 – Mike75

d3將鼠標事件發送給div子元素

回答

相關問題