jquery ui с възможност за сортиране с възможност за изпускане и css с плаващ

Опитвам се да създам проста "игра":
Имам списък с възможност за сортиране вдясно, който съдържа елементи, които могат да бъдат пуснати в пускане.

Ето какво имам досега:
http://jsfiddle.net/geY2Z/1/

код, скрипт:

function func() {
    $("#list").sortable({});
    $("#container").droppable({
        accept: ".drag",
        drop: function (ev, ui) {
            $("#s").html("drop!" + count++);
            ui.helper.clone().appendTo("#container").draggable({containment:"#container"});
            ui.helper.remove();
        }
    });
}
func();

html:

<div id='list' style='width:100px;height:200px;overflow: auto; border:1px solid red; float: right;'>
    <div class='drag'><span>dragme</span></div>
    <div class='drag'><span>dragme</span></div>
</div>
<div id='container' style='float:left;border:1px solid black; width:400px;height:500px;'></div>

Проблемите са следните:
1. Искам елементите все още да могат да се плъзгат, след като са пуснати в контейнера, но за да ограничат движението до контейнера, затова използвах и плъзгане - това ли е най-добрият начин?

2. Искам контейнерът и списъкът да не променят позицията си, дори ако прозорецът е преоразмерен. Ще забележите, че ако преоразмерите прозореца, контейнерът ще се прекъсне след списъка и влачените елементи вътре в контейнера ще се изместят навън. Не искам това да се случи, искам контейнерът винаги да е на един ред със списъка, винаги отляво, с фиксирана ширина и височина. Ако прозорецът е преоразмерен, искам да видя лентата за превъртане за контейнера с елементите вътре. Опитах да използвам overflow:auto, но без успех. Мисля, че свойството float не е добро в този случай, така че какво трябва да използвам вместо това?

РЕДАКТИРАНЕ:

Друг проблем:
Забелязах, че е възможно да пуснете елемента „наполовина“ вътре в контейнера (извън границата на контейнера) и събитието за пускане все още се задейства и елементът не се връща. Как мога да предотвратя това, да го огранича в контейнера или да го върна?
Например, опитайте се да плъзнете елемента и да го поставите някак извън контейнера, той ще бъде приет, но след това, ако бъде плъзнат отново, ще бъде ограничен вътре в контейнера, както искам при първото плъзгане от списъка с възможност за сортиране.


user-interface containers jquery jquery-ui-sortable droppable
person user3599803    schedule 01.07.2014    source източник
comment
Моля, публикувайте кода във въпроса   -  person Popnoodles    schedule 01.07.2014
comment
Свързах се с jsfiddle, но добре.   -  person user3599803    schedule 01.07.2014

Отговори (1)


arrow_upward
0
arrow_downward

RE: #1 - Да, това е напълно приемливо.

RE: #2 - Искате да обвиете вашите два плаващи <div> елемента в родителски <div>, който има фиксирана ширина; това ще предотврати увиването ви. Бих добавил и DIV с ясна корекция след плаващите, само за по-сигурно. Ето как ще изглежда вашето ново маркиране:

<div style="width:510px">
    ... <!-- Your existing floating DIVs -->
    <div style="clear:both"></div>
</div>

Актуализиран jsFiddle, разклонен от вашия: http://jsfiddle.net/YqAP7/

person Stevangelista    schedule 01.07.2014
comment
Много ви благодаря. Не можех да си представя, че ще бъде толкова просто. Въпреки че отговорихте на въпроса ми, имам друг въпрос, актуализирах въпроса си. Счита се, че предметът се пуска наполовина вътре. Може да отворя друг въпрос, ако трябва.. - person user3599803; 02.07.2014