d3 отправить событие мыши в дочерний элемент div

При попытке перетащить полную форму, содержащуюся в div, проблема состоит в том, чтобы сохранить поведение дочерних элементов по умолчанию (здесь ввод текста, чтобы разрешить, например, выбор текста мышью) и ограничить начало перетаскивания 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>

javascript events d3.js children preserve
person Mike75    schedule 17.01.2015    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Недавно я решил аналогичную проблему, добавив обработчик mouseover/mouseout в текстовую область, чтобы отключить и включить поведение перетаскивания родительского div, например:

        var e = elem.find('textarea');
        e.on('mouseover', function(){ elem.draggable('destroy') });
        e.on('mouseout', function(){ elem.draggable() });
person Curtis Autery    schedule 17.01.2015
comment
Где это должно быть размещено? Я поставил его после nodes.call(node_drag); и там это не изменило поведение (ввод по-прежнему не выбирается). Также я попытался найти («ввод») вместо поиска («текстовое поле»). - person Mike75; 17.01.2015

arrow_upward
0
arrow_downward

Вы можете подавить перетаскивание этого элемента:

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

Пример здесь.

person Mark    schedule 17.01.2015
comment
Текст в примере по-прежнему нельзя выделить. - person Mike75; 17.01.2015
comment
@Mike75, черт возьми, IE работает в Chrome, дай мне взглянуть еще раз. - person Mark; 17.01.2015
comment
Еще странно: когда я копирую строки: d3.select(#dragme › input).on(mousedown, function(){ d3.event.stopPropagation(); }); в мою первоначальную процедуру перемещения это все еще не действует !?? Я использую firefox с Ubuntu 14. Это: d3.select(#dragme › input).on(mousedown, function(){ d3.event.stopPropagation(); alert(here I am); }); показывает сообщение, но не выделение текста. Я этого не понимаю. - person Mike75; 18.01.2015
comment
@ Mike75, ты скопировал это в функцию перемещения? Он принадлежит вне его после nodes.call(node_drag). - person Mark; 18.01.2015