Форум

NapalmRain · #1 (**permalink**) 27.07.2017, 18:40

Доброго всем времени суток!

Имеется небольшой модуль для сайта, в котором есть блоки с иформацией. Эти блоки находятся в свёрнутом состоянии и разворачиваться должны по клику.

Так же эти же блоки должны перетаскиваться по странице.

код инициализации всего этого выглядит так:

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);
}

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

Буду очень признателен за совет!

рони · #2 (**permalink**) 27.07.2017, 19:23

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>

NapalmRain · #3 (**permalink**) 28.07.2017, 09:46

рони,
Благодарю! timeout в событии стоп спас.

Форум

Справочник

Discord чат

Курсы javascript