Форум

tai · #1 (**permalink**) 02.11.2013, 13:59

Добрый день!

Подскажите как сделать так, чтобы при перетаскивании одного элемента другой элемент следовал за ним?

Например в диапазоне цен: перетаскиваем бегунок и блок с ценой также перетаскивается за этой ценой

DjDiablo · #2 (**permalink**) 03.11.2013, 16:58

Если jquery UI используешь

Для dragable
В кэлбеке drag меняй координаты второго элемента
http://jqueryui.com/draggable/#events

Если sortable
кэллбек slide
В кэлбеке slide достаточно получить координаты бегунка это элемент с классом ui-slider-handle, а затем выставить текстовому блоку координаты как у бегунка. Каждый раз когда бегунок будет перемещаться, будет перемещаться и текстовый блок.

tai · #3 (**permalink**) 03.11.2013, 22:32

sortable

1) В файле ui.js прописываю

var coords = $(".ui-slider-handle").offset();
var left = Math.round(coords.left);
alert (left);

ничего не выводит

Если убрать строчку var left = Math.round(coords.left);
Выводит undefined

2) Если получим координаты, то как потом связать их с тем блоком, который нужно передвигать.

3) используются два бегунка, как придать им разный id или class

рони · #4 (**permalink**) 04.11.2013, 00:14

Сообщение от tai

перетаскиваем бегунок и блок с ценой также перетаскивается за этой ценой

Вариант

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">
  <title>slider demo</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/south-street/jquery-ui.css">
  <style>
  #slider { margin: 10px; }
  #show{
       position: relative;
       width: 30px;
       top: 5px;

    }
  	</style>

  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

</head>

<body>
<div id="show">0</div>
<div id="slider"></div>
<script>

$( "#slider" ).slider(
   {change: function( event, ui ) {
   var left = $(ui.handle).css("left");
   $("#show").html(ui.value).css({left : left} )  },
   slide: function( event, ui ) {
   var left = $(ui.handle).css("left");
   $("#show").html(ui.value).css({left : left} )  }

   }
);
</script>
</body>
</html>

tai · #5 (**permalink**) 04.11.2013, 12:22

Спасибо, а если будет 2 бегунка?

рони · #6 (**permalink**) 04.11.2013, 13:39

Сообщение от tai

Спасибо, а если будет 2 бегунка?

тоже самое только вначале определяется индекс ui.handle и вместо value -> values попробуйте придумать свой код для этого - мне был бы интересен ваш вариант.

tai · #7 (**permalink**) 05.11.2013, 09:43

Помогите разобраться.
Что-то делаю не так и .slider("values", index, [value]) корректно применить не получается.

tai · #8 (**permalink**) 05.11.2013, 10:02

<span id="min_block">0</span>
<span id="max_block">50000</span>
<div id="slider"></div>
<script type="text/javascript">
$( "#slider" ).slider({
range: true,
min: 0,
max: 50000,
values: [ 0, 50000 ],
change: function( event, ui ) {
var left0 = $(ui.handle[ 0 ]).css("left");
var left1 = $(ui.handle[ 1 ]).css("left");
$("#min_block").html(ui.values[ 0 ]).css({left : left0});
$("#max_block").html(ui.values[ 1 ]).css({left : left1});
},
slide: function( event, ui ) {
var left0 = $(ui.handle[ 0 ]).css("left");
var left1 = $(ui.handle[ 1 ]).css("left");
$("#min_block").html(ui.values[ 0 ]).css({left : left0});
$("#max_block").html(ui.values[ 1 ]).css({left : left1});

$( "#min_block" ).val( ui.values[ 0 ] );
$( "#max_block" ).val( ui.values[ 1 ] );
}
});
</script>

ui.handle[ 0 ]
Как правильно определять индекс?

рони · #9 (**permalink**) 05.11.2013, 11:39

tai,

примерно будет так ... вариант без использования ui.values ... хотелось бы мне знать другие способы ... css уточните согласно вашей разметке...

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">
  <title>slider demo</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/le-frog/jquery-ui.css">
  <style>
  #slider { margin: 10px;width : 500px; }
  .show1{
       position: relative;
       width: 30px;
       top: 25px;

    }
  .show2{
       position: relative;
       width: 30px;
       top: 5px;
       left: 500px;
       margin-left:  -5px;
    }
  	</style>

  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

</head>

<body>
<div class="show1">0</div><div class="show2">50000</div>
<div id="slider"></div>
<script>

$( "#slider" ).slider(
   {
   range: true,
   min: 0,
   max: 50000,
   values: [ 0, 50000 ],
   change: function( event, ui ) {
   var index = $(ui.handle).index();
   var left = $(ui.handle).css("left");
   $(".show"+index).html(ui.value).css({left : left} )  },
   slide: function( event, ui ) {
   var index = $(ui.handle).index();
   var left = $(ui.handle).css("left");
   $(".show"+index).html(ui.value).css({left : left} )  }
   }
);
</script>
</body>
</html>

tai · #10 (**permalink**) 05.11.2013, 11:45

Огромное спасибо!!!!

Форум

Справочник

Discord чат

Курсы javascript