Перетаскивание (Dragger событие) предотвращает OnClick

Question

мы использовали одну библиотеку Jquery называется jesse, который прекрасно работает

Дело в том, у нас есть LI атрибуты и внутри него мы использовали OnClick событие .. но как-то она перестает работать, и мы не можем назвать событие OnClick .. Вот скрипку для лучшего понимания

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://www.jqueryscript.net/demo/Simple-jQuery-Plugin-For-Drag-Drop-Sorting-Of-Lists-jesse/jquery-jesse.js"></script> 
 

 

 
<script type="text/javascript"> 
 
    
 
$(function(){ 
 
    
 
    // removing image onclick close button 
 
    $("#list").on("click", ".close_product", function (event) { 
 
    console.log('inside onclick function'); 
 
    }); 
 
    
 
\t \t $('#list').jesse({ 
 
\t \t \t onStop: function(position, prevPosition, item) { 
 
\t \t \t \t console.log('inside list function'); 
 
\t \t \t \t if(position == 0){ 
 
\t \t \t \t \t item.addClass("drop-high").removeClass("drop-small");; 
 
\t \t \t \t \t $("#list").find("li:nth-child(2)").removeClass("drop-high").addClass("drop-small"); 
 
\t \t \t \t } 
 
\t \t \t \t if(prevPosition == 0){ 
 
\t \t \t \t \t \t item.addClass("drop-small").removeClass("drop-high"); 
 
\t \t \t \t \t $("#list").find("li:nth-child(1)").removeClass("drop-small").addClass("drop-high"); 
 
\t \t \t \t 
 
\t \t \t \t } 
 
\t \t \t }, 
 
\t \t }); 
 
\t }); 
 
    </script> 
 
<ul class="jq-jesse" id="list"> 
 
            <li class="drop-high"><div class="high"><div class="close close_product">X</div><img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2016/04/1459870313PHP-logo.svg.png" width="20%"></div> </li> 
 
            <li class="drop-small"><div class="high"><div class="close close_product">X</div><img src="https://phpwomen.org/holdingpage/images/usergroups/phpne.png" width="20%"></div> </li> 
 
            <li class="drop-small"><div class="high"><div class="close close_product">X</div><img src="http://d3gnp09177mxuh.cloudfront.net/tech-page-images/php.png" width="20%"></div></li> 
 
            <li class="drop-small"><div class="high"><div class="close close_product">X</div><img src="http://unitedwebsoft.in/blog/wp-content/uploads/2013/07/advantage-of-php.jpg" width="20%"></div></li> 
 
           
 
           </ul>

Как вы можете видеть выше, у меня есть функция onclick, но она не работает. Как я могу заставить его работать?

Answer 1

В библиотеке не используются события перетаскивания. Он прослушивает mousedown, и если он запущен, он прекращает выполнение по умолчанию с e.preventDefault(); и наблюдает за $(document).on('mousemove') и .on('mouseup').

Поэтому закрытие div не слышит click событие. Вы можете немного изменить файл библиотеки, чтобы он идентифицировал закрывающиеся клики.

1. Добавить специальные настройки, скажем, closingClass к классу (строка 7)

   var settings = $.extend({ 
       closingClass: 'closing', 
       selector: 'li', 
       dragClass: '_isDragged', 
       placeholder: '<li class="jq-jesse__placeholder"></li>' 
   }, options); 
   

2. Изменить прослушивание щелчки при закрытии дивы, добавив следующие 3 строки:

   list.on('mousedown', settings.selector, function(e){ 
       if($(e.target).hasClass(settings.closingClass)) { 
        return true; 
       } 
   

3. Вот и все. Теперь вы не можете перетащить, используя div, имеющий closingClass. Вы можете добавить своих слушателей.

Fiddle with fixed library code.