我们使用了一个名为 jesse 的 jquery 库效果很好
问题是我们有一个 li 属性,在它里面我们使用了 onclick 事件..但不知何故它停止工作,我们无法调用 onclick 事件..这是更好理解的 fiddle
<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
功能,但它不起作用。我怎样才能让它工作?
最佳答案
库不使用拖动事件。它监听 mousedown
,如果被触发,它会停止默认执行 e.preventDefault();
并监视 $(document).on('mousemove')
和 .on('mouseup')
。
因此关闭 div
听不到任何 click
事件。您可以稍微修改库文件以使其识别关闭点击。
向类添加特定设置,例如
closingClass
(第 7 行)var settings = $.extend({ closingClass: 'closing', selector: 'li', dragClass: '_isDragged', placeholder: '<li class="jq-jesse__placeholder"></li>' }, options);
通过添加以下 3 行更改关闭 div 时的点击监听:
list.on('mousedown', settings.selector, function(e){ if($(e.target).hasClass(settings.closingClass)) { return true; }
就是这样。现在您不能使用具有
closingClass
的 div 进行拖动。您可以添加自己的监听器。
fiddle with fixed library code .
关于javascript - 拖放(Dragger 事件)防止 onclick,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41981330/