代码之家  ›  专栏  ›  技术社区  ›  Pete Duncanson

javascript:dragable div中的图像在拖动时停止拖放

  •  1
  • Pete Duncanson  · 技术社区  · 15 年前

    客户机要求整个DIV是可拖动的,DIV包含一些文本和图像。我把分区改成了

  • 标记并使用Mootools可拖动的Goodies使其全部工作。直到客户机单击图像并开始在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 回复  |  直到 9 年前
        1
  •  1
  •   Community CDub    8 年前

    5年后,我遇到了同样的问题,我发现这个问题是我最好的解决方案:

    'dragleave' of parent element fires when dragging over children elements

    在你的情况下:

    .asset_list * {
        pointer-events: none;
    }
    

    简单有效:)

        2
  •  0
  •   Pete Duncanson    15 年前

    通过将图像转换为与图像在宽度、高度、边框等方面具有相同样式的跨距图像,并将背景图像设置为内嵌样式,解决了这一问题。IE现在将其视为任何其他HTML元素,而不是“图像”,因此拖动是固定的。不是很容易接近,但也不是拖放!