iPhone原生应用程序,如股票应用程序,可让您轻松创建列表,然后拖放列表项目并使用拖放占位符突出显示项目对其进行排序。触摸界面,用于使用拖放功能排序或排序列表
我们有很多应用程序使用jQuery来允许基于鼠标的排序或排序功能,类似于此。
这些都不能在触摸界面上工作。我有兴趣用支持触摸界面的实现替换这些实现。
任何想法?
我在找这个http://jqueryui.com/demos/sortable/#default,但支持移动/触摸界面。
iPhone原生应用程序,如股票应用程序,可让您轻松创建列表,然后拖放列表项目并使用拖放占位符突出显示项目对其进行排序。触摸界面,用于使用拖放功能排序或排序列表
我们有很多应用程序使用jQuery来允许基于鼠标的排序或排序功能,类似于此。
这些都不能在触摸界面上工作。我有兴趣用支持触摸界面的实现替换这些实现。
任何想法?
我在找这个http://jqueryui.com/demos/sortable/#default,但支持移动/触摸界面。
[更新]:YUI是不再发展,则应该检查https://shopify.github.io/draggable/或https://rubaxa.github.io/Sortable/或http://touchpunch.furf.com/
YUI 3拖放模块充分准备用透明触摸界面的工作,你不必编写任何特定的代码。
我试过在Ipad和Android手机上(也是IE,Firefox,Chrome在Windows上)。
从这里你可以尝试的例子:
...以及在该页面引用的例子休息。
我现在正在项目中使用它,如果您提出更具体的问题,我可能会给予进一步的帮助。
-
您可以检查我的幻灯片与这件事情在这里针对不同的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
});
});
});
这不适用于Android版Chrome 32。 – trusktr 2014-01-22 05:29:10
当天我在Chrome Android和iOs Safari上测试它,会再次测试并发表评论... – vicenteherrera 2014-01-24 15:29:54
它可以正常工作,但是很敏感....真正明显的原因。我不敢相信他们甚至不会上山顶工作。谢谢! – 2014-09-02 13:20:30
我找过 - 所有我能找到的是这一点,这确实删除部分类似:https://github.com/AndreaCammarata /Ext.tux.EditableList也许如果必须在拖放中建立它,可以建立在此之上。 – 2012-04-29 15:48:34