拖放(Dragger事件)可防止onclick

时间:2017-02-01 13:44:00

标签: javascript jquery html drag-and-drop mouselistener

我们使用了一个名为jesse的jquery库,它工作正常

事情是我们有一个 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');
    });
  
		$('#list').jesse({
			onStop: function(position, prevPosition, item) {
				console.log('inside list function');
				if(position == 0){
					item.addClass("drop-high").removeClass("drop-small");;
					$( "#list" ).find( "li:nth-child(2)" ).removeClass("drop-high").addClass("drop-small");
				}
				if(prevPosition == 0){
						item.addClass("drop-small").removeClass("drop-high");
					$( "#list" ).find( "li:nth-child(1)" ).removeClass("drop-small").addClass("drop-high");
				
				}
			},
		});
	});
  </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功能,但它不起作用。我怎样才能使它工作?

1 个答案:

答案 0 :(得分:2)

库不使用拖动事件。它会监听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行来更改关闭div的点击次数:

    list.on('mousedown', settings.selector, function(e){
        if($(e.target).hasClass(settings.closingClass)) {
            return true;
        }
    
  3. 就是这样。现在你无法使用closingClass的div进行拖动。您可以添加自己的侦听器。

  4. 小提琴with fixed library code