Форум

DenQ · #1 (**permalink**) 19.01.2011, 22:25

Всем привет.
Дополнение 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 перетаскиваемого менялся на максимальный.

x-yuri · #2 (**permalink**) 20.01.2011, 00:29

сделай для начала, чтобы оно запускалось прямо на форуме

<!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>

Matre · #3 (**permalink**) 20.01.2011, 07:37

<!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>

DenQ · #4 (**permalink**) 20.01.2011, 10:26

Сообщение от x-yuri

сделай для начала, чтобы оно запускалось прямо на форуме

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

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

Matre · #5 (**permalink**) 20.01.2011, 12:29

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

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

сначала нужно установить название группы а потом запускать drag-n-drop
в stack надо писать не селектор,а название группы

x-yuri · #6 (**permalink**) 20.01.2011, 13:11

Сообщение от 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. читайте исходники

DenQ · #7 (**permalink**) 20.01.2011, 16:04

x-yuri, спасибо, вечером гляну, как линь запущу.

DenQ · #8 (**permalink**) 20.01.2011, 22:13

Теперь понятно в чем была ошибка, просто в документации этого не пишут, а если и пишут то как-то по "конячему".

$(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. Я то думал оно более продуманное.
Ну что же, ладно, всем спасибо.
Пока.

Форум

Справочник

Discord чат

Курсы javascript