1

div に含まれる完全なフォームをドラッグ/ドロップしようとすると、問題は子要素のデフォルトの動作 (ここではマウスによるテキスト選択などを許可するテキスト入力) を保持し、dragstart を div#dragme に制限することです。ボーダー部分。

説明はここにあり ます https://github.com/mbostock/d3/wiki/Drag-Behavior#on 要素をドラッグしているときに望ましくない動作を保持する方法についてですが、ここでは反対のことが望ましいと思います。イベントを divs の子に送信し、デフォルトの動作を実行させます。

これがコードです。マウスでテキストを選択してみてください（またはダブルクリックでテキスト全体を選択してください）、うまくいきません：

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

テキストエリアにマウスオーバー/マウスアウトハンドラーを追加して、親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 に答える
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 に答える