druggble последовательность отработки событий в разных браузерах
Доброго всем времени суток!
Имеется небольшой модуль для сайта, в котором есть блоки с иформацией. Эти блоки находятся в свёрнутом состоянии и разворачиваться должны по клику. Так же эти же блоки должны перетаскиваться по странице. код инициализации всего этого выглядит так:
blocks.bind('click', catchBlock);
blocks.not('.nondruggble').draggable({stop : LetGo, start : startMove});
Проблема в том, что с точки зрения браузера перетаскивание - это просто очень длинный клик и поэтому после перетаскивания событие клика тоже срабатывает, поэтому я сделал так
var startMove = function(e) {
var t = $(this);
t.css({'z-index' : 1000});
t.unbind('click');
}
var LetGo = function(event, ui) {
var t = $(this);
t.css({'z-index' : ''});
t.bind('click', catchBlock);
}
Но тут в силу вступает разность браузеров. Проверено было на хроме и мазиле. На хроме такой финт ушами сработал корректно, а мазиле же при таком раскладе блоки всё равно разворачиваются после того, как к ним вновь назначается отработка события клика. Что мне кажется странным, но пока не понимаю, как это решить. Буду очень признателен за совет! |
открывашка 223 зависимая + перемещение блоков
NapalmRain,
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<style type='text/css'>
.block1, .block3 {
position: relative;
width: 500px;
height: 50px;
background: blue;
}
.block2 {
position: relative;
width: 500px;
height: 125px;
background: #fff;
padding: 25px;
transition: all 0.5s ease;
}
.block2 > div {
float: left;
width: 250px;
}
.elem {
position: relative;
margin-bottom: 20px;
width: 200px;
}
.head {
width: 100%;
height: 30px;
text-align: center;
line-height: 30px;
background: green;
color: #fff;
font-weight: 700;
cursor: pointer;
}
.hide {
border-top: none!important;
border: 1px solid #bbb;
padding: 10px;
}
</style>
<script>
$(function() {
var $h = $(".hide"),
$a = $(".head"),
$b = $(".block2");
$h.each(function(indx, el) {
el = $(el);
var contHeight = el.height(),
head = $a.eq(indx);
el.hide();
head.on("click", function(event) {
if($(this).parents(".dragg").length) return;
event.preventDefault();
$h.stop(true,true).not(el.slideToggle(800)).slideUp(800);
$a.not(head.toggleClass("open")).removeClass("open");
$b.height(125 + head.is(".open") * contHeight)
})
})
$(".elem").draggable({delay:100 ,stop : function() {
window.setTimeout(function() {
$(".elem").removeClass("dragg")
},10)
}, start : function() {
$(this).addClass("dragg")
}})
});
</script>
</head>
<body>
<div class="block1"></div>
<div class="block2">
<div class="left">
<div class="elem">
<div class="head">Клик</div>
<div class="hide">Длинный спрятанный контент</div>
</div>
<div class="elem">
<div class="head">Клик</div>
<div class="hide">Очень-очень длинный трудночитаемый спрятанный контент</div>
</div>
<div class="elem">
<div class="head">Клик</div>
<div class="hide">Спрятанный контент</div>
</div>
</div>
<div class="right">
<div class="elem">
<div class="head">Клик</div>
<div class="hide">Спрятанный контент</div>
</div>
<div class="elem">
<div class="head">Клик</div>
<div class="hide">Спрятанный контент</div>
</div>
<div class="elem">
<div class="head">Клик</div>
<div class="hide">Спрятанный контент</div>
</div>
</div>
</div>
<div class="block3"></div>
</body>
</html>
|
рони,
Благодарю! timeout в событии стоп спас. |
| Часовой пояс GMT +3, время: 04:35. |