Форум

Infinity178 · #1 (**permalink**) 26.12.2016, 17:26

Все привет!

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

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

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

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

Т.е.

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

рони · #2 (**permalink**) 26.12.2016, 17:43

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

если только не повторно вызывать в success

вызвать только для новых элементов, если это возможно или разрушить виджет затем добавить потом инициализировать снова.

рони · #3 (**permalink**) 26.12.2016, 17:45

Infinity178,
может будет достаточно

$( ".selector" ).sortable( "refresh" );

Infinity178 · #4 (**permalink**) 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){

рони · #5 (**permalink**) 26.12.2016, 18:16

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

вызывать в success

рони · #6 (**permalink**) 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>

Форум

Справочник

Discord чат

Курсы javascript