Javascript: изображение внутри перетаскиваемого div останавливает мое перетаскивание при перетаскивании - PullRequest
Новая
       7

Javascript: изображение внутри перетаскиваемого div останавливает мое перетаскивание при перетаскивании

1 голос
/ 18 декабря 2009

Клиент спросил, что весь div можно перетаскивать, div содержит текст и изображение. Я преобразовал div в тег

и использовал перетаскиваемые вкусности Mootools, чтобы все это заработало. Это происходит до тех пор, пока клиент не нажмет на изображение и не начнет его перетаскивать в IE. Затем браузер думает, что вы хотите перетащить изображение, и игнорирует события перетаскивания для родительского li.

Есть какие-нибудь подсказки относительно того, что я могу сделать, чтобы изображение не было перетаскиваемым? Или, по крайней мере, вызвать событие onmousedown родителя?

Вот пример HTML: 

<ul class="asset_list">
  <li id="1"><img src="test1.jpg" />Blah blah blah</li>
  <li id="2"><img src="test2.jpg" />Blah blah blah</li>
  <li id="3"><img src="test3.jpg" />Blah blah blah</li>
</ul>

И вот некоторые из JS, которые я использую для перетаскивания 

// Set up drap and drop
$$( 'ul.asset_list li' ).each( function( item ){
 item.removeEvents();
 item.addEvent('mousedown', function(e) {
  e = new Event(e).stop();

  // Create our clone of the asset for dragging
  var clone = this.clone( true, true );
  clone.removeEvents();
  clone.addClass( "dragging" );
  clone.setStyles(this.getCoordinates()); // this returns an object with left/top/bottom/right, so its perfect

  var drag = clone.makeDraggable({
    droppables: [TrailStream.playlist],
    precalculate: true,
    revert: true,
   }
  }); // this returns the dragged element

  drag.start(e); // start the event manual
 });
});

Ответы [ 2 ]

1 голос
/ 01 октября 2015

5 лет спустя, я столкнулся с той же проблемой, и я нашел, что это лучшее решение для меня:

«перетаскивание» родительского элемента происходит при перетаскивании дочерних элементов

В вашем случае: 

.asset_list * {
    pointer-events: none;
}

Просто и эффективно :)

0 голосов
/ 18 декабря 2009

Обошли это путем преобразования изображений в интервалы с теми же стилями, которые были у изображения на нем для ширины, высоты, границы и т. Д., И установив фоновое изображение во встроенном стиле. IE теперь обрабатывает его как любой другой элемент HTML, а не как «изображение», поэтому перетаскивание исправлено. Не совсем дружественный доступ, но тогда ни перетаскивание!

...