2009-12-30 2 views
4

У меня есть ul, которая перетаскивается, и в li есть якоря, которые я хочу деактивировать во время перетаскивания, чтобы они не запускались после перетаскивания.().jQuery перетаскиваемый список с интерактивными объектами внутри - предотвращение нажатия на перетаскивание

<ul class="draggable-list"> 
    <li class="list-item"><a href="#">clickable child</a></li> 
    <li class="list-item"><a href="#">clickable child</a></li> 
    ... 
</ul> 

Похожая ситуация с этим: Preventing click event with jQuery drag and drop

Но мой перетаскиваемым пункт не моя интерактивная вещь, мой перетаскиваемым элемент содержит мои интерактивные элементы.

Я попробовал код по ссылке выше, а потому, что он ссылается на перемещаемой объект, это не мешает щелкает правильно:

$("ul.draggable-list").draggable({ 
    start: function(event, ui) { 
     ui.helper.bind("click.prevent", 
      function(event) { event.preventDefault(); }); 
    }, 
    stop: function(event, ui) { 
     setTimeout(function(){ui.helper.unbind("click.prevent");}, 300); 
    } 
}) 

Я попробовал это, прямо указывают на элементы, которые я нужно отключить, но это имеет эффект инициирование щелчка на первую попытку сопротивления, а затем предотвращая ВСЕ клики (потащили или нет) потом:

$("ul.draggable-list").draggable({ 
    start: function() { 
     $(".list-item a").bind("click.prevent", 
      function(event) { event.preventDefault(); }); 
    }, 
    stop: function() { 
     setTimeout(function(){$(".list-item a").unbind("click.prevent");}, 300); 
    } 
}) 

Я не уверен, как изменить ui.helper .bind, так что это b в отличие от перетаскиваемого родителя.

ответ

4

Основываясь на примере здесь: http://www.west-wind.com/Weblog/posts/762598.aspx

Я получил это работает таким образом:

start: function(e) { 
    $(".list-item a").unbind("click"); 
}, 
stop: function(e) { 
    setTimeout(function() { 
     $(".list-item a").click(function(){...}); 
    }, 300); 
}