Проблема FireFox для перетаскиваемого div с изображением не перетаскиваемых детей - PullRequest
Новая
       5

Проблема FireFox для перетаскиваемого div с изображением не перетаскиваемых детей

0 голосов
/ 01 июня 2019

Я установил горизонтальный перетаскиваемый div, используя скрипт ниже. В chrome все работает нормально, и изображения детей не могут быть опасными, как я установил draggable='false'.

Когда я читаю здесь , атрибут draggable='false' недостаточно в FireFox. Я попробовал и старый, и обновленный ответ на вышеуказанный вопрос (ondragstart="return false"), и оба они работают над простым изображением на экране, но в моем случае я думаю, что где-то оно перекрывается скриптом drag-handlig на родительском div , Я не могу найти, где происходит конфликт, в CSS или SCRIPT.

примечание: Как вы видите в сценарии, я предполагаю, что движение меньше 8px как событие щелчка, и проблема начинается после 8px движения. На самом деле в Firefox после 8px движения, изображения обрезаются от родителя, и вы можете перетащить его в любое место в окне. 

function handle_mousedown(e){

    window.my_dragging = {};
    my_dragging.pageX0 = e.pageX;
    my_dragging.pageY0 = e.pageY;
    my_dragging.elem = this;
    my_dragging.offset0 = $(this).scrollLeft();

    $(".catHolder").on("click",function(e){return true;});
    
    function handle_dragging(e){
    	var amount=e.pageX - my_dragging.pageX0;
        var left = my_dragging.offset0 - amount;
        
        if (Math.abs(amount)>8){
       		$(".catHolder").one("click",function(e){return false;});
        }
        $(my_dragging.elem).scrollLeft(left);
    }
    
    function handle_mouseup(e){
	    $(".catHolder").on("click",function(e){return true;});
        $(window).off('mousemove', handle_dragging).off('mouseup', handle_mouseup);
    }
    
    $(window).on('mouseup', handle_mouseup).on('mousemove', handle_dragging);
}

$(document).ready(function(){$(".catHolder").mousedown(handle_mousedown);})
.catHolder{
  width:400px;
  max-width:100%;
  border:5px solid #ff8800;
  -webkit-overflow-scrolling: touch;
  white-space:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
}

.noselect{
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none; 
  user-select: none;
}

.catSquare{
  display:inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="catHolder">

    <div class="catSquare noselect">
      <a href="#" draggable="false">
        <table>
          <tr><td><img ondragstart="return false" draggable="false" src="https://www.codesd.com/static/img/logo.jpg"></td></tr>
          <tr><td>text</td></tr>
        </table>
      </a>
    </div>
    
    <div class="catSquare">
      <a href="#" draggable="false">
        <table>
          <tr><td><img  ondragstart="return false" draggable="false" src="https://www.codesd.com/static/img/logo.jpg"></td></tr>
          <tr><td>text</td></tr>
        </table>
      </a>
    </div>
    
    <div class="catSquare">
      <a href="#" draggable="false">
        <table>
          <tr><td><img  ondragstart="return false" draggable="false" src="https://www.codesd.com/static/img/logo.jpg"></td></tr>
          <tr><td>text</td></tr>
        </table>
      </a>
    </div>
    
    <div class="catSquare">
      <a href="#" draggable="false">
        <table>
          <tr><td><img  ondragstart="return false" draggable="false" src="https://www.codesd.com/static/img/logo.jpg"></td></tr>
          <tr><td>text</td></tr>
        </table>
      </a>
    </div>    
			
    <div style="clear:both"></div>
</div>

1 Ответ

0 голосов
/ 01 июня 2019

Поскольку изображения являются потомками тега <a>, мне пришлось добавить тег ondragstart="return false" к тегу <a>.Фактически, тег <a> сначала получает событие mousdown, и изображения были повреждены родительским якорем. 

function handle_mousedown(e){

    window.my_dragging = {};
    my_dragging.pageX0 = e.pageX;
    my_dragging.pageY0 = e.pageY;
    my_dragging.elem = this;
    my_dragging.offset0 = $(this).scrollLeft();

    $(".catHolder").on("click",function(e){return true;});
    
    function handle_dragging(e){
    	var amount=e.pageX - my_dragging.pageX0;
        var left = my_dragging.offset0 - amount;
        
        if (Math.abs(amount)>8){
       		$(".catHolder").one("click",function(e){return false;});
        }
        $(my_dragging.elem).scrollLeft(left);
    }
    
    function handle_mouseup(e){
	    $(".catHolder").on("click",function(e){return true;});
        $(window).off('mousemove', handle_dragging).off('mouseup', handle_mouseup);
    }
    
    $(window).on('mouseup', handle_mouseup).on('mousemove', handle_dragging);
}

$(document).ready(function(){$(".catHolder").mousedown(handle_mousedown);})
.catHolder{
  width:400px;
  max-width:100%;
  border:5px solid #ff8800;
  -webkit-overflow-scrolling: touch;
  white-space:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
}

.noselect{
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none; 
  user-select: none;
}

.catSquare{
  display:inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="catHolder">

    <div class="catSquare noselect">
      <a href="#" draggable="false" ondragstart="return false">
        <table>
          <tr><td><img ondragstart="return false" draggable="false" src="https://www.codesd.com/static/img/logo.jpg"></td></tr>
          <tr><td>text</td></tr>
        </table>
      </a>
    </div>
    
    <div class="catSquare">
      <a href="#" draggable="false" ondragstart="return false">
        <table>
          <tr><td><img  ondragstart="return false" draggable="false" src="https://www.codesd.com/static/img/logo.jpg"></td></tr>
          <tr><td>text</td></tr>
        </table>
      </a>
    </div>
    
    <div class="catSquare">
      <a href="#" draggable="false" ondragstart="return false">
        <table>
          <tr><td><img  ondragstart="return false" draggable="false" src="https://www.codesd.com/static/img/logo.jpg"></td></tr>
          <tr><td>text</td></tr>
        </table>
      </a>
    </div>
    
    <div class="catSquare">
      <a href="#" draggable="false" ondragstart="return false">
        <table>
          <tr><td><img  ondragstart="return false" draggable="false" src="https://www.codesd.com/static/img/logo.jpg"></td></tr>
          <tr><td>text</td></tr>
        </table>
      </a>
    </div>    
			
    <div style="clear:both"></div>
</div>
...