Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.11.2013, 11:59
tai tai вне форума
Аспирант
Отправить личное сообщение для tai Посмотреть профиль Найти все сообщения от tai
 
Регистрация: 15.01.2013
Сообщений: 95

Привязка к элементу при перетаскивании
Добрый день!

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

Например в диапазоне цен: перетаскиваем бегунок и блок с ценой также перетаскивается за этой ценой
Ответить с цитированием
  #2 (permalink)  
Старый 03.11.2013, 14:58
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 04.02.2011
Сообщений: 1,815

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

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

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

Последний раз редактировалось DjDiablo, 03.11.2013 в 15:02.
Ответить с цитированием
  #3 (permalink)  
Старый 03.11.2013, 20:32
tai tai вне форума
Аспирант
Отправить личное сообщение для tai Посмотреть профиль Найти все сообщения от tai
 
Регистрация: 15.01.2013
Сообщений: 95

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)  
Старый 03.11.2013, 22:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,526

slider jquery ui
Сообщение от 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>

Последний раз редактировалось рони, 03.11.2013 в 22:55.
Ответить с цитированием
  #5 (permalink)  
Старый 04.11.2013, 10:22
tai tai вне форума
Аспирант
Отправить личное сообщение для tai Посмотреть профиль Найти все сообщения от tai
 
Регистрация: 15.01.2013
Сообщений: 95

Спасибо, а если будет 2 бегунка?
Ответить с цитированием
  #6 (permalink)  
Старый 04.11.2013, 11:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,526

Сообщение от tai
Спасибо, а если будет 2 бегунка?
тоже самое только вначале определяется индекс ui.handle и вместо value -> values попробуйте придумать свой код для этого - мне был бы интересен ваш вариант.
Ответить с цитированием
  #7 (permalink)  
Старый 05.11.2013, 07:43
tai tai вне форума
Аспирант
Отправить личное сообщение для tai Посмотреть профиль Найти все сообщения от tai
 
Регистрация: 15.01.2013
Сообщений: 95

Помогите разобраться.
Что-то делаю не так и .slider("values", index, [value]) корректно применить не получается.
Ответить с цитированием
  #8 (permalink)  
Старый 05.11.2013, 08:02
tai tai вне форума
Аспирант
Отправить личное сообщение для tai Посмотреть профиль Найти все сообщения от tai
 
Регистрация: 15.01.2013
Сообщений: 95

<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, 09:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,526

slider ползунок UI две рукоятки
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>
Ответить с цитированием
  #10 (permalink)  
Старый 05.11.2013, 09:45
tai tai вне форума
Аспирант
Отправить личное сообщение для tai Посмотреть профиль Найти все сообщения от tai
 
Регистрация: 15.01.2013
Сообщений: 95

Огромное спасибо!!!!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Кратное увеличение при клике на кнопку vabus Элементы интерфейса 2 15.04.2013 19:42
Вид курсора при перетаскивании ilja209 Элементы интерфейса 2 01.04.2013 11:07
Как выполнить код javascript при инклюде странички на php wfire jQuery 7 27.05.2011 13:43
Не понимаю почему возникает ошибка при перетаскивании satels jQuery 4 10.01.2010 02:57
Firefox: перехватить соббытие при перетаскивании текста no_alex Общие вопросы Javascript 9 21.08.2008 17:02