Показать сообщение отдельно
  #1 (permalink)  
Старый 24.02.2013, 01:58
Кандидат Javascript-наук
Отправить личное сообщение для OklickSpb Посмотреть профиль Найти все сообщения от OklickSpb
 
Регистрация: 17.02.2012
Сообщений: 130

.draggable + .droppable + .sortable
Всем доброго времени суток!
Нужно организовать такую штуку:
Что бы можно было товары сортировать по группам, как вы уже поняли при помощи drag and drop
Суть заключается в том, что бы пользователь мог перемещать элементы не только по группам(div'ам), но и сортировать эти элементы внутри них...
Вот код, но он не хочет работать, вернее он перемещает в дивы, но не позволяет сортировать их, в чем ошибка?
var groupPrice = {
	0:'#block2',
	1:'#block3'
}
$(function() {
    $('.textBlock').draggable({
        helper:'clone',
		cursor: 'move',
		stop: function(){
			$(this).css("background-color", "red");
		}
    });

for (var key in groupPrice) {
       $(groupPrice[key]).droppable({
        hoverClass: 'dropHere'
        ,drop: function(event, ui) {
            $(this).append($('<div class="textBlock">' + ui.draggable.html() + '</div>'));
           $(this).sortable({ opacity: 0.8, cursor: 'move', update: function() {alert("Изменено");}});
        }
    });
	}
});


HTML:
<div class="wrapper">
	Перетащите
        <div id="block1">
            <div class="textBlock">Товар 1</div>
            <div class="textBlock">Товар 2</div>
            <div class="textBlock">Товар 3</div>
        </div>
        <div id="block2"></div>
		<div id="block3"></div>

    </div>


Видел тему: draggable+droppable+sortable возможно ли? , так и не понял до конца, что у меня не правильно?

Последний раз редактировалось OklickSpb, 24.02.2013 в 02:08.
Ответить с цитированием