Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   jQuery DOM Sortable, Droppable и Draggable (https://javascript.ru/forum/jquery/66600-jquery-dom-sortable-droppable-i-draggable.html)

Infinity178 26.12.2016 17:26
jQuery DOM Sortable, Droppable и Draggable
 
Все привет!

Столкнулся с интересным вопросом...

есть у jQuery UI такие классные штука как Sortable, Droppable и Draggable.. Но!

Вся интрига заключается в следующем..

Контент подгружается методом Ajax, как запустить вышеуказанные функции?

Т.е.

есть document.ready - где мы запускаем скажем Sortable
при загрузке Ajax контента Sortable уже не срабатывает, если только не повторно вызывать в success, но такой вариант не подходит...

рони 26.12.2016 17:43
Цитата:
Сообщение от Infinity178
если только не повторно вызывать в success
вызвать только для новых элементов, если это возможно или разрушить виджет затем добавить потом инициализировать снова.

рони 26.12.2016 17:45
Infinity178,
может будет достаточно 
$( ".selector" ).sortable( "refresh" );

Infinity178 26.12.2016 17:51
А как правильно прописать в такую струкруту?
$(".sortable").sortable({
			items:             '.el_move',
			tolerance:         'pointer',
			handle:            '[data-change="move"]',
			scrollSensitivity: 40,
			opacity:           0.7, 
			forcePlaceholderSize: true,
			axis: 'y',
		
			helper: function(event, ui){

рони 26.12.2016 18:16
:-?
Цитата:
Сообщение от Infinity178
вызывать в success

рони 26.12.2016 18:28
Infinity178, 
<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>sortable demo</title>

  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">

  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

  <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

</head>

<body>



<ul id="sortable">

  <li>Item 1</li>

  <li>Item 2</li>

  <li>Item 3</li>

  <li>Item 4</li>

  <li>Item 5</li>

</ul>
<input name="" type="button" value="Ajax" class="btn">


<script>

$("#sortable").sortable();

$(".btn").on('click', function() {
$("<li>", {text: "Item "+ ($("#sortable li").length+1)}).appendTo("#sortable")
$( "#sortable" ).sortable( "refresh" );
}

)

</script>



</body>

</html>


Часовой пояс GMT +3, время: 21:35.