jQuery UI sortable
Здравствуйте!
Задача в общих чертах такая: если элемент сбрасывается между нижними элементами, то стандартное поведение sortable, а если прямо на нижний элемент, то другое поведение. Как можно определить на какой элемент был сброшен перетаскиваемый элемент? |
Цитата:
|
Вот еще метод есть...
http://jquery-docs.ru/core/index/#subject |
Цитата:
И как получить значения его свойств? |
Цитата:
|
<div>
<ul class="sort">
<li>aaaaa</li>
<li>bbbbb</li>
<li>ccccc</li>
<li>ddddd</li>
<li>eeeee</li>
<li>fffff</li>
</ul>
<script>
$(function () {
$(".sort").sortable({
connectWith: "ul",
opacity: "0.75",
});
});
</script>
</div>
Вот если сбросить элемент прямо в другой элемент, нужно узнать, что за элемент был внизу. |
_Kirill, это разве пример? :D
Вот пример!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable li span { position: absolute; margin-left: -1.3em; }
</style>
<script type='text/javascript'>
$( function() {
$( "#sortable" ).sortable({
stop: function( event, ui ) {
var o=$('.ui-state-default');
alert('Всего '+o.length+' наш '+o.index(ui.item));
}
});
$( "#sortable" ).disableSelection();
});
</script>
</head>
<body>
<ul id="sortable">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
</body>
</html>
|
_Kirill, смотри какие еще события тебе дает сортабле
http://api.jqueryui.com/sortable/ и выбирай из них те, которые тебе подойдут... ;) |
Цитата:
Тебе ведь нужно знать не последним ли стал твой элемент? Мой пример даст тебе на это ответ. :yes: |
Нет, мне нужно именно знать, что за элемент был внизу в момент дропа :)
Дело вот в чем: есть иерархическое дерево, в котором все элементы условно делятся на два типа: файлы и папки. Папки могут содержать дочерние элементы, файлы, естественно, нет. Ну и проблема вот в чем: если в папке есть хотя бы один дочерний элемент, то функционала sortable вполне достаточно, чтобы добавить в эту папку еще элементы, но если папка пустая, то дропнуть элемент можно только на саму папку. Соответственно нужно узнать что это именно папка и удалить элемент с первоначальной позиции и добавить в эту пустую папку. Т.е. мне нужно как бы объединить функционал droppable и sortable. С событиями все понятно, проблема в определении элемента, над которым был дроп. |
| Часовой пояс GMT +3, время: 12:45. |