2009-08-25 2 views
1

У меня есть код ниже, который составляет список div и droppable div, при удалении он возвращает список идентификаторов в новом порядке.Предельное количество jquery drag and drop id's

Мне нужно добавить 2 функции в этот код.

1)
В выпадающем списке выбора будет 5 вариантов. 3,6,9,12,15, и когда пользователь выбирает одно из этих номеров, мне нужно выделить первый номер X div. если пользователь выбирает 9, мне нужно, чтобы первые 9 div в списке перетаскивания изменили цвет фона, чтобы вы могли указать, что выбраны эти 9.
Мне также нужен другой вызов ajax, который нужно сделать в любое время, когда этот номер раскрывающегося списка изменится, чтобы сохранить это число.
Когда страница перезагружается, это выпадающее меню вытащит номер из БД, так что если у пользователя уже было 99 сохраненных в БД, когда они посещают эту страницу, сценарий отобразит 9 в поле и уже будет выбран 9 div.

2)
На стороне перетаскивания на капли такое значение возвращается 0 | 1 | 2 | 3 | 4 | 5 и так далее в правильном порядке. Мне нужно ограничить этот список, чтобы вернуть только первые X чисел. Если выпадающее окно выбрано 9 выше, оно должно сохранить только первый заказ 9 div.

Помогите пожалуйста?

<ul id="gallery"> 
    <li itemID='12'> 
     <div>Photo Here</div> 
    </li> 
    <li itemID='23'> 
     <div>Photo Here</div> 
    </li> 
    <li itemID='32'> 
     <div>Photo Here</div> 
    </li> 
    <li itemID='43'> 
     <div>Photo Here</div> 
    </li> 

    ...up to hundreds 
</ul> 


<script type="text/javascript"> 

    $("#gallery").dragsort({ 
     dragSelector: "li div", 
     dragEnd: saveOrder 
    }); 

    function saveOrder() { 
     var serialStr = ""; 
     $("#gallery li").each(function(i, elm) { 
      serialStr += (i > 0 ? "|" : "") + $(elm).attr("itemID"); 
     }); 
     alert(serialStr); 
     // $.ajax({ url: "saveorder.php/SaveListOrder", data: '{"ids":"' + serialStr + '"}', dataType: "json", type: "POST", contentType: "application/json; charset=utf-8" }); 
    }; 

</script> 

ответ

1

Используйте этот селектор CSS: http://api.jquery.com/lt-selector/

Итак:

var serialStr = ""; 
var list = $("#gallery li:lt(" + $("#limit").val() + ")"); 
list.addClass("highlight").each(function(i, elm) { ... }); 
alert(serialStr);