Форум

_Kirill · #1 (**permalink**) 29.12.2016, 13:15

Здравствуйте!
Задача в общих чертах такая: если элемент сбрасывается между нижними элементами, то стандартное поведение sortable, а если прямо на нижний элемент, то другое поведение.
Как можно определить на какой элемент был сброшен перетаскиваемый элемент?

ksa · #2 (**permalink**) 29.12.2016, 13:40

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

Как можно определить на какой элемент был сброшен перетаскиваемый элемент?

По значениям его свойств...

ksa · #3 (**permalink**) 29.12.2016, 13:41

Вот еще метод есть...
http://jquery-docs.ru/core/index/#subject

_Kirill · #4 (**permalink**) 29.12.2016, 14:08

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

По значениям его свойств...

Ок...
И как получить значения его свойств?

ksa · #5 (**permalink**) 29.12.2016, 14:29

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

И как получить значения его свойств?

Ты хоть бы пример какой тестовый сделал...

_Kirill · #6 (**permalink**) 29.12.2016, 14:57

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

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

ksa · #7 (**permalink**) 29.12.2016, 15:01

_Kirill, это разве пример?

Вот пример!

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

ksa · #8 (**permalink**) 29.12.2016, 15:04

_Kirill, смотри какие еще события тебе дает сортабле
http://api.jqueryui.com/sortable/
и выбирай из них те, которые тебе подойдут...

ksa · #9 (**permalink**) 29.12.2016, 15:06

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

если элемент сбрасывается между нижними элементами, то стандартное поведение sortable, а если прямо на нижний элемент, то другое поведение.

Даже вопрос у тебя какой-то странный...

Тебе ведь нужно знать не последним ли стал твой элемент?

Мой пример даст тебе на это ответ.

_Kirill · #10 (**permalink**) 29.12.2016, 15:25

Нет, мне нужно именно знать, что за элемент был внизу в момент дропа

Дело вот в чем: есть иерархическое дерево, в котором все элементы условно делятся на два типа: файлы и папки.
Папки могут содержать дочерние элементы, файлы, естественно, нет.
Ну и проблема вот в чем: если в папке есть хотя бы один дочерний элемент, то функционала sortable вполне достаточно, чтобы добавить в эту папку еще элементы, но если папка пустая, то дропнуть элемент можно только на саму папку. Соответственно нужно узнать что это именно папка и удалить элемент с первоначальной позиции и добавить в эту пустую папку.

Т.е. мне нужно как бы объединить функционал droppable и sortable.
С событиями все понятно, проблема в определении элемента, над которым был дроп.

Форум

Справочник

Discord чат

Курсы javascript