Сенсорный интерфейс для сортировки или упорядочивания списка с помощью перетаскивания - PullRequest
Новая
       16

Сенсорный интерфейс для сортировки или упорядочивания списка с помощью перетаскивания

2 голосов
/ 12 января 2012

Собственные приложения для iPhone, такие как приложение Stocks, позволяют легко создавать список, а затем перетаскивать элементы списка, чтобы упорядочить их с помощью выделения заполнителя.

У нас есть много приложений, которые используют jQuery, чтобы разрешить, на основе мыши, сортировать или упорядочить функции, подобные этой.

Однако ни один из них не работает на сенсорном интерфейсе. Я заинтересован в замене этих реализаций на те, которые поддерживают сенсорный интерфейс.

Есть идеи?

Я ищу это http://jqueryui.com/demos/sortable/#default, но с поддержкой мобильного / сенсорного интерфейса.

1 Ответ

1 голос
/ 03 мая 2012

[ОБНОВЛЕНИЕ]: YUI больше не находится в разработке, вместо этого вы должны проверить https://shopify.github.io/draggable/ или https://rubaxa.github.io/Sortable/ или http://touchpunch.furf.com/

Модуль перетаскивания YUI 3 полностью подготовлен для прозрачной работы с сенсорными интерфейсами, вам не нужно писать какой-либо конкретный код.

Я пробовал это на Ipad и телефоне Android (также IE, Firefox, Chrome на Windows).

Вы можете попробовать пример здесь:

http://yuilibrary.com/yui/docs/dd/list-drag.html

... а также остальные примеры, упомянутые на этой странице.

Я использую его прямо сейчас в проекте, если вы зададите более конкретные вопросы, я смогу оказать дополнительную помощь.

-

Вы можете проверить мои слайды со ссылками для сравнения различных JS-структур и других примеров YUI по этому вопросу здесь: https://docs.google.com/presentation/d/1YPPomooNx3dP6Vv4JEEXqPmDuA1In3qp9Jz_R7FnRs4/edit

И вы можете проверить перетаскивание YUI в JSFiddle здесь: http://jsfiddle.net/mordraug/eKe3q/5/

HTML 

<div id="play">
  <ul id="list1">
    <li class="list1">Item #1</li>
    <li class="list1">Item #2</li>
    <li class="list1">Item #3</li>
    <li class="list1">Item #4</li>
    <li class="list1">Item #5</li>
  </ul>
  <ul id="list2">
    <li class="list2">Item #1</li>
    <li class="list2">Item #2</li>
    <li class="list2">Item #3</li>
    <li class="list2">Item #4</li>
    <li class="list2">Item #5</li>
  </ul>
</div>

CSS 

#play ul li {
    background-image: none;
    list-style-type: none;
    padding-left: 20px;
    padding: 5px;
    margin: 2px;
    cursor: move;
    zoom: 1;
    position: relative;
}
#play ul {
    border: 1px solid black;
    margin: 10px;
    width: 200px;
    height: 300px;
    float: left;
    padding: 0;
    zoom: 1;
    position: relative;
}
#play ul li.list1 {
    background-color: #8DD5E7;
    border: 1px solid #004C6D;
}
#play ul li.list2 {
    background-color: #EDFF9F;
    border: 1px solid #CDCDCD;
}

JavaScript 

YUI().use('dd-constrain', 'dd-proxy', 'dd-drop', function (Y) {
    //Listen for all drop:over events
    Y.DD.DDM.on('drop:over', function (e) {
        //Get a reference to our drag and drop nodes
        var drag = e.drag.get('node'),
            drop = e.drop.get('node');

        //Are we dropping on a li node?
        if (drop.get('tagName').toLowerCase() === 'li') {
            //Are we not going up?
            if (!goingUp) {
                drop = drop.get('nextSibling');
            }
            //Add the node to this list
            e.drop.get('node').get('parentNode').insertBefore(drag, drop);
            //Resize this nodes shim, so we can drop on it later.
            e.drop.sizeShim();
        }
    });
    //Listen for all drag:drag events
    Y.DD.DDM.on('drag:drag', function (e) {
        //Get the last y point
        var y = e.target.lastXY[1];
        //is it greater than the lastY var?
        if (y < lastY) {
            //We are going up
            goingUp = true;
        } else {
            //We are going down.
            goingUp = false;
        }
        //Cache for next check
        lastY = y;
    });
    //Listen for all drag:start events
    Y.DD.DDM.on('drag:start', function (e) {
        //Get our drag object
        var drag = e.target;
        //Set some styles here
        drag.get('node').setStyle('opacity', '.25');
        drag.get('dragNode').set('innerHTML', drag.get('node').get('innerHTML'));
        drag.get('dragNode').setStyles({
            opacity: '.5',
            borderColor: drag.get('node').getStyle('borderColor'),
            backgroundColor: drag.get('node').getStyle('backgroundColor')
        });
    });
    //Listen for a drag:end events
    Y.DD.DDM.on('drag:end', function (e) {
        var drag = e.target;
        //Put our styles back
        drag.get('node').setStyles({
            visibility: '',
            opacity: '1'
        });
    });
    //Listen for all drag:drophit events
    Y.DD.DDM.on('drag:drophit', function (e) {
        var drop = e.drop.get('node'),
            drag = e.drag.get('node');

        //if we are not on an li, we must have been dropped on a ul
        if (drop.get('tagName').toLowerCase() !== 'li') {
            if (!drop.contains(drag)) {
                drop.appendChild(drag);
            }
        }
    });

    //Static Vars
    var goingUp = false,
        lastY = 0;

    //Get the list of li's in the lists and make them draggable
    var lis = Y.Node.all('#play ul li');
    lis.each(function (v, k) {
        var dd = new Y.DD.Drag({
            node: v,
            target: {
                padding: '0 0 0 20'
            }
        }).plug(Y.Plugin.DDProxy, {
            moveOnEnd: false
        }).plug(Y.Plugin.DDConstrained, {
            constrain2node: '#play'
        });
    });

    //Create simple targets for the 2 lists.
    var uls = Y.Node.all('#play ul');
    uls.each(function (v, k) {
        var tar = new Y.DD.Drop({
            node: v
        });
    });
});
...