Question

尝试拖放包含在div中的完整表单，问题是保留默认行为子元素的元素（这里是文本输入到允许例如通过鼠标选择文本并限制 dragstart到div＃dragme border part。

这里有一个描述 https://github.com/mbostock/d3/wiki/Drag-Behavior#on 如何在拖动元素时保留一些不需要的行为，但我猜这里相反的是可取的，这意味着（类似的东西）将事件发送到div 孩子并使他们执行默认行为。

以下是代码，请尝试通过鼠标选择文本（或通过双击选择全文），它不会起作用：

    <!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>

Answer 1

您可以抑制该元素的拖动：

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

<强> EDITS

以上在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。

Answer 2

我最近通过在textarea上添加mouseover / mouseout处理程序来解决类似的问题，以关闭和打开父div的拖动行为，例如：

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

d3将鼠标事件发送到div子元素

2 个答案: