觸摸界面，用於使用拖放功能排序或排序列表

Question

iPhone原生應用程序，如股票應用程序，可讓您輕鬆創建列表，然後拖放列表項目並使用拖放佔位符突出顯示項目對其進行排序。

我們有很多應用程序使用jQuery來允許基於鼠標的排序或排序功能，類似於此。

這些都不能在觸摸界面上工作。我有興趣用支持觸摸界面的實現替換這些實現。

任何想法？

我在找這個http://jqueryui.com/demos/sortable/#default，但支持移動/觸摸界面。

Answer 1

[更新]：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

而且你可以在這裏測試中的jsfiddle YUI拖放： 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 
     }); 
    }); 
});