2013-08-18 3 views
1

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

Вот мой HTML:

<div class="container"> 
    <div class="clickable"></div> 
    <div id="content">A!</div> 
</div> 

DIV с классом «контейнер» является перетаскивание и .clickable имеет click функцию, чтобы переключить DIV с идентификатором content.

+0

Не могли бы вы опубликовать свой код и HTML. Вероятно, вам придется перестроить HTML. –

+0

Я только что редактировал свой пост. – Rawrrr1337

+0

Возможно, вы могли бы использовать «mousedown» и «mouseup». То, о чем вы просите, сложно, вам, возможно, придется рассчитать время между ними и щелкнуть, если он ниже определенного предела и перетащить, если он выше этого предела, но это подвержено множеству ошибок и тому подобное. Это или просто область div, которая перетаскивается, а другая часть - кликабельна. –

ответ

0

Как было предложено в моем комментарии, вы можете добавить класс к элементу (например, dragging), когда вы начнете перетаскивать функцию перетаскиваемого объекта, чем проверка в обработчике кликов, если элемент (или его родительский элемент в вашем case) должны классифицировать или, альтернативно, запускать функцию.

Код:

$(document).ready(function() { 

    $('.container').draggable({ 
     start: function (event, ui) { 
      $(this).addClass('dragging'); 
     } 
    }); 

    $('.clickable').click(function (event) { 
     if ($(this).parent().hasClass('dragging')) { 
      $(this).parent().removeClass('dragging'); 
     } else { 
      //alert("real click"); 
      $("#content").toggle(); 
     } 
    }); 
}); 

Может быть, есть альтернативы, но это единственное решение, которое я использовал.

Демо: http://jsfiddle.net/IrvinDominin/N3bKb/

Docs:

Смежные вопросы