Jquery drag and item positon

Я использую jqueryui draggable Мне нужно перетащить элементы, а также сохранить там положение в базе данных, чтобы в следующий раз, если мы загрузим страницу, она будет отображаться на основе предыдущей настройки, как если бы первый элемент перетащил нижнюю пятую элемент, а затем в следующий раз он будет показан ниже пятого элемента на странице load.My Вопрос в том, как мы можем получить позицию после drag.Any помощь должна быть оценена.Jquery drag and item positon

<style> 
ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; } 
li { margin: 5px; padding: 5px; width: 150px; } 
</style> 
<script> 
$(function() { 
$("#sortable").sortable({ 
revert: true 
}); 
$("#draggable").draggable({ 
connectToSortable: "#sortable", 
helper: "clone", 
revert: "invalid" 
}); 
$("ul, li").disableSelection(); 
}); 
</script> 
</head> 
<body> 

<ul id="sortable"> 
<li class="ui-state-default">Item 1</li> 
<li class="ui-state-default">Item 2</li> 
<li class="ui-state-default">Item 3</li> 
<li class="ui-state-default">Item 4</li> 
<li class="ui-state-default">Item 5</li> 
</ul>

example

источник

2013-10-24 Prince

Проверить этот пример и updateCounterStatus функции:

<style> 
    #draggable { width: 16em; padding: 0 1em; } 
    #draggable ul li { margin: 1em 0; padding: 0.5em 0; } * html #draggable ul li { height: 1%; } 
    #draggable ul li span.ui-icon { float: left; } 
    #draggable ul li span.count { font-weight: bold; } 
    </style> 
    <script> 
    $(function() { 
    var $start_counter = $("#event-start"), 
     $drag_counter = $("#event-drag"), 
     $stop_counter = $("#event-stop"), 
     counts = [ 0, 0, 0 ]; 

    $("#draggable").draggable({ 
     start: function() { 
     counts[ 0 ]++; 
     updateCounterStatus($start_counter, counts[ 0 ]); 
     }, 
     drag: function() { 
     counts[ 1 ]++; 
     updateCounterStatus($drag_counter, counts[ 1 ]); 
     }, 
     stop: function() { 
     counts[ 2 ]++; 
     updateCounterStatus($stop_counter, counts[ 2 ]); 
     } 
    }); 

    function updateCounterStatus($event_counter, new_count) { 
     // first update the status visually... 
     if (!$event_counter.hasClass("ui-state-hover")) { 
     $event_counter.addClass("ui-state-hover") 
      .siblings().removeClass("ui-state-hover"); 
     } 
     // ...then update the numbers 
     $("span.count", $event_counter).text(new_count); 
    } 
    }); 
    </script> 
</head> 
<body> 

<div id="draggable" class="ui-widget ui-widget-content"> 

    <p>Drag me to trigger the chain of events.</p> 

    <ul class="ui-helper-reset"> 
    <li id="event-start" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-play"></span>"start" invoked <span class="count">0</span>x</li> 
    <li id="event-drag" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-arrow-4"></span>"drag" invoked <span class="count">0</span>x</li> 
    <li id="event-stop" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-stop"></span>"stop" invoked <span class="count">0</span>x</li> 
    </ul> 
</div>

источник

2013-10-24 06:09:44

Jquery drag and item positon

ответ

Смежные вопросы