jQuery UI Sortable — 드래그 / 정렬 된 항목에 대한 클릭 이벤트를 취소하려면 어떻게해야합니까?
나는이 jQuery를 UI 정렬 가능한의 목록을. 정렬 가능한 항목에는 클릭 이벤트도 첨부되어 있습니다. 항목을 드래그 한 후 클릭 이벤트가 발생하지 않도록하는 방법이 있습니까?
$().ready( function () {
$('#my_sortable').sortable({
update: function() { console.log('update') },
delay: 30
});
$('#my_sortable li').click(function () {
console.log('click');
});
});#my_sortable li {
border: 1px solid black;
display: block;
width: 100px;
height: 100px;
background-color: gray;
}<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<ul id="my_sortable">
<li id="item_1">A</li>
<li id="item_2">B</li>
<li id="item_3">C</li>
</ul> 나는 똑같은 문제가 있었고 정렬 가능한 항목이 3-4 개의 클릭 가능한 항목을 포함했기 때문에 (숫자는 가변적이었습니다) 즉시 바인딩 / 바인딩 해제는 실제로 옵션으로 보이지 않았습니다. 그러나 우연히 나는
helper : 'clone'
옵션은 인터페이스 측면에서 원래 정렬 가능한 것과 동일하게 작동하지만 드래그 된 항목에서 클릭 이벤트를 발생시키지 않으므로 문제를 해결합니다. 다른 것만 큼 해킹이지만 적어도 짧고 쉽습니다 ..
li에 대한 클릭 이벤트에 대한 참조가있는 경우 정렬 가능한 업데이트 메서드에서 바인딩을 해제 한 다음 Event / one을 사용하여 다시 바인딩 할 수 있습니다. 리 바인드하기 전에 이벤트 전파를 중지하여 원래 클릭 핸들러가 실행되지 않도록 할 수 있습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<script type="text/javascript" charset="utf-8">
var myClick = function () {
console.log('click');
};
$().ready( function () {
$('#my_sortable').sortable({
update: function(event, ui) {
ui.item.unbind("click");
ui.item.one("click", function (event) {
console.log("one-time-click");
event.stopImmediatePropagation();
$(this).click(myClick);
});
console.log('update') },
delay: 30
});
$('#my_sortable li').click(myClick);
});
</script>
<style type="text/css" media="screen">
#my_sortable li {
border: 1px solid black;
display: block;
width: 100px;
height: 100px;
background-color: gray;
}
</style>
</head>
<body>
<ul id="my_sortable">
<li id="item_1">A</li>
<li id="item_2">B</li>
<li id="item_3">C</li>
</ul>
</body>
</html>
어떤 이유로 든 helper:'clone'트릭 을 사용하고 싶지 않다면 이것은 나를 위해 일했습니다. 드래그 된 항목에 대한 클릭 이벤트를 취소합니다. jQuery는 ui-sortable-helper드래그 된 요소에 클래스 를 추가합니다 .
$('.draggable').click(clickCancelonDrop);
function clickCancelonDrop(event) {
var cls = $(this).attr('class');
if (cls.match('ui-sortable-helper'))
return event.stopImmediatePropagation() || false;
}
$('.selector').draggable({
stop: function(event, ui) {
// event.toElement is the element that was responsible
// for triggering this event. The handle, in case of a draggable.
$( event.toElement ).one('click', function(e){ e.stopImmediatePropagation(); } );
}
});
이것은 "하나의 청취자" 가 "일반" 청취자 보다 먼저 실행되기 때문에 작동합니다 . 따라서 하나의 청취자가 전파를 중지하면 이전에 설정된 청취자에 도달하지 않습니다.
mercilor의 대답은 몇 가지 경고를 받았습니다. 클릭 이벤트는 실제로 정렬 된 항목 자체가 아니라 핸들 요소에있었습니다. 불행히도 ui 객체는 업데이트 이벤트의 핸들에 대한 참조를 제공하지 않습니다 (jquery ui에 대한 기능 요청?). 그래서 나는 스스로 손잡이를 잡아야했다. 또한 클릭 동작을 중지하기 위해 preventDefault도 호출해야했습니다.
update: function(ev, ui) {
var handle = $(ui.item).find('h3');
handle.unbind("click");
handle.one("click", function (event) {
event.stopImmediatePropagation();
event.preventDefault();
$(this).click(clickHandler);
});
// other update code ...
더 쉽게 var를 사용하여 요소가 정렬되는시기를 알 수 있습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<script type="text/javascript" charset="utf-8">
$().ready( function () {
$('#my_sortable').sortable({
start: function() {
sorting = true;
},
update: function() {
console.log('update');
sorting = false;
},
delay: 30
});
$('#my_sortable li').click(function () {
if (typeof(sorting) == "undefined" || !sorting) {
console.log('click');
}
});
});
</script>
<style type="text/css" media="screen">
#my_sortable li {
border: 1px solid black;
display: block;
width: 100px;
height: 100px;
background-color: gray;
}
</style>
</head>
<body>
<ul id="my_sortable">
<li id="item_1">A</li>
<li id="item_2">B</li>
<li id="item_3">C</li>
</ul>
</body>
</html>
중지 이벤트에 플래그를 사용하고 클릭 이벤트에서 해당 플래그를 확인할 수도 있습니다.
var isSortableCalled = false;
$('#my_sortable').sortable({
stop: function(event, ui){
isSortableCalled = true;
},
update: function() { console.log('update') },
delay: 30
});
$('#my_sortable li').click(function () {
if(!isSortableCalled){
console.log('click');
}
isSortableCalled = false;
});
한 가지 해결책은 일반 바인딩 대신 live ()를 사용하는 것이지만 Elte Hupkes 솔루션은 흔들립니다 !!!!
Elte Hupkus 에게 감사드립니다 .
helper: 'clone'
나는 동일하게 구현했으며 아래에 샘플이 나와 있습니다.
$(document).ready(function() {
$("#MenuListStyle").sortable({
helper:'clone',
revert:true
}).disableSelection();
});
$('.menu_group tbody a').click(function(){
link = $(this).attr('href');
window.location.href = link;
});
이 솔루션은 나를 위해 일하는 것 같습니다. 이제 정렬 가능한 요소 내에서 클릭 가능한 항목을 클릭 할 수 있습니다.
참고 : ".menu_group tbody"입니다.sortable();
'Program Tip' 카테고리의 다른 글
| Git을 사용할 때 Visual Studio에서 분기 (로컬 / 원격)를 어떻게 새로 고치나요? (0) | 2020.11.13 |
|---|---|
| 이“react-scripts eject”명령은 무엇을합니까? (0) | 2020.11.13 |
| 오류 C2065 : 'cout': 선언되지 않은 식별자 (0) | 2020.11.13 |
| xampp에서 컬을 활성화하는 방법은 무엇입니까? (0) | 2020.11.13 |
| easy_install이 MySQLdb를 찾을 수없는 이유는 무엇입니까? (0) | 2020.11.13 |