1

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

此处有一个描述 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>
4

2 回答 2

0

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

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

这里的例子。

于 2015-01-17T14:19:49.867 回答
0

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

        var e = elem.find('textarea');
        e.on('mouseover', function(){ elem.draggable('destroy') });
        e.on('mouseout', function(){ elem.draggable() });
于 2015-01-17T14:32:52.533 回答