Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.01.2011, 21:25
Аспирант
Отправить личное сообщение для DenQ Посмотреть профиль Найти все сообщения от DenQ
 
Регистрация: 28.08.2010
Сообщений: 57

draggable stack
Всем привет.
Дополнение draggable к библиотеке jQuery, гарантирует, что если применить метод stack, то тогда обрабатываемый элемент, каждый раз при перетаскивании будет иметь наивысший z-index. Но что-то, как-то не так все на практике. Делал по справочнику. Смотрел примеры в гугле, сделал все как и там, а не работает...
Посмотрите пожалуйста:
index.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="lib/jquery/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="lib/jquery/jquery-ui-1.8.8.custom.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style/main.css" />
    <title>Drag and drop</title>
</head>
<body>
    <div id="el-1" class="drag" name="g"></div>
    <div id="el-2" class="drag"></div>
<script>
$(document).ready(function() {
    $("div#el-1").css("background-color", "silver");
    $("div#el-2").css("background-color", "grey");
 
    $('.drag').draggable({
        opacity: 0.40,
        stack: {
            group: '.drag', min: 50
        }
    });
});
</script>
</body>
</html>

main.css
.drag{   
    border      : 1px solid black;
    width       : 100;
    height      : 100;
    z-index     : 10;
}


PS. Файлы расположены правильно, и все подключено, если что...
PSS. Иначе говоря, нужно чтобы при перетаскивании, одного дива над другим, z-index перетаскиваемого менялся на максимальный.

Последний раз редактировалось DenQ, 19.01.2011 в 21:27.
Ответить с цитированием
  #2 (permalink)  
Старый 19.01.2011, 23:29
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

сделай для начала, чтобы оно запускалось прямо на форуме
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="style/main.css" />
    <title>Drag and drop</title>
    <style type="text/css">
.drag{   
    border      : 1px solid black;
    width       : 100;
    height      : 100;
    z-index     : 10;
}
    </style>
</head>
<body>
    <div id="el-1" class="drag" name="g"></div>
    <div id="el-2" class="drag"></div>
<script>
$(document).ready(function() {
    $("div#el-1").css("background-color", "silver");
    $("div#el-2").css("background-color", "grey");
 
    $('.drag').draggable({
        opacity: 0.40,
        stack: {
            group: '.drag', min: 50
        }
    });
});
</script>
</body>
</html>

Последний раз редактировалось x-yuri, 19.01.2011 в 23:35.
Ответить с цитированием
  #3 (permalink)  
Старый 20.01.2011, 06:37
Профессор
Отправить личное сообщение для Matre Посмотреть профиль Найти все сообщения от Matre
 
Регистрация: 07.01.2011
Сообщений: 582

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="style/main.css" />
    <title>Drag and drop</title>
    <style type="text/css">
.drag{   
    border      : 1px solid black;
    width       : 100;
    height      : 100;
    z-index     : 10;
}
    </style>
</head>
<body>
    <div id="el-1" class="drag" name="g"></div>
    <div id="el-2" class="drag"></div>
<script>
z=0;
$(document).ready(function() {
    $("div#el-1").css("background-color", "silver");
    $("div#el-2").css("background-color", "grey");
 
    $('.drag').draggable({
	start:function(){this.style.zIndex=z++}
    });
});
</script>
</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 20.01.2011, 09:26
Аспирант
Отправить личное сообщение для DenQ Посмотреть профиль Найти все сообщения от DenQ
 
Регистрация: 28.08.2010
Сообщений: 57

Сообщение от x-yuri
сделай для начала, чтобы оно запускалось прямо на форуме
А смысл? разве кода так много, что обязательно нужен пример? И спасибо, буду знать что, та можно!

Matre, спасибо, конечно, но это "велосипеды", есть конкретный метод и его нужно/можно использовать.
Ответить с цитированием
  #5 (permalink)  
Старый 20.01.2011, 11:29
Профессор
Отправить личное сообщение для Matre Посмотреть профиль Найти все сообщения от Matre
 
Регистрация: 07.01.2011
Сообщений: 582

читайте справку по испвольванию этой опции

http://slyweb.ru/jquerydoc/draggable-options.php

сначала нужно установить название группы а потом запускать drag-n-drop
в stack надо писать не селектор,а название группы
Ответить с цитированием
  #6 (permalink)  
Старый 20.01.2011, 12:11
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

Сообщение от DenQ
А смысл? разве кода так много, что обязательно нужен пример? И спасибо, буду знать что, та можно!
при чем тут пример? Если хочешь, чтобы тебе помогли - максимально упрости задачу. В частности, при запуске на форуме я в консоли вижу следующие ошибки
Код:
group[0].style is undefined
var min = parseInt(group[0].style.zIndex) || 0;
и глянув в код
var o = $(this).data("draggable").options;

var group = $.makeArray($(o.stack)).sort(function(a,b) {
return (parseInt($(a).css("zIndex"),10) || 0) - (parseInt($(b).css("zIndex"),10) || 0);
});
if (!group.length) { return; }

var min = parseInt(group[0].style.zIndex) || 0;

видно, что stack должно быть селектором

Matre, ты б на версию глянул

p.s. читайте исходники
Ответить с цитированием
  #7 (permalink)  
Старый 20.01.2011, 15:04
Аспирант
Отправить личное сообщение для DenQ Посмотреть профиль Найти все сообщения от DenQ
 
Регистрация: 28.08.2010
Сообщений: 57

x-yuri, спасибо, вечером гляну, как линь запущу.
Ответить с цитированием
  #8 (permalink)  
Старый 20.01.2011, 21:13
Аспирант
Отправить личное сообщение для DenQ Посмотреть профиль Найти все сообщения от DenQ
 
Регистрация: 28.08.2010
Сообщений: 57

Теперь понятно в чем была ошибка, просто в документации этого не пишут, а если и пишут то как-то по "конячему".
$(document).ready(function() {
    $("div#el-1").css("background-color", "silver");
    $("div#el-2").css("background-color", "grey");
    $("div#el-3").css("background-color", "orange");

    $('.drag').draggable({
        opacity: "0.4",
        stack: ".drag"
    });
});

x-yuri, тот код что ты привел, я у себя не нашел. Да и "рыться" в сжатых исходниках как-то в лом. Просто попробовал сделать так же как и раньше просто без group. Единственное, что не нра, так это то, что индекс меняется не по касанию, а при перемещении. В этом сходство с методом Matre. Я то думал оно более продуманное.
Ну что же, ладно, всем спасибо.
Пока.

Последний раз редактировалось DenQ, 20.01.2011 в 21:19.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
jquery ui sortable + draggable giGnet jQuery 1 08.03.2011 18:37
Ошибка в IE: Stack overflow at line: 0 dmitriy1982x Ваши сайты и скрипты 2 20.06.2010 12:47
Странный баг UI draggable в Firefox и IE _deil_ jQuery 0 10.01.2010 18:49
ui draggable + sortable satels jQuery 0 05.01.2010 10:28
prototype + draggable Akape Events/DOM/Window 0 01.09.2008 17:20