2：还有移动端的zepto库 也有手势插件，
3：另外还有个叫QuoJS的手势插件 这个插件不依赖任何的库，
4：早期的应该是用wml语言支持的WMLScript实现。
5：举例：使用iscroll.js实现
1）下载iScroll.js，百度搜索iScroll.js下载即可
2）引入iScroll.js，在要使用滑动效果的地方，引入iScroll.js文件
3）编写规范的html格式
只有如下格式才能实现滑动效果
<div id="wrapper">
<div class="scroll">
这个区域可以滑动
</div>
</div>
如下格式不能滑动
<div id="wrapper">
<div class="other">这个区域可以滑动</div>
<div class="scroll">
这个区域不可以滑动了
</div>
</div>
只有wrapper的第一个子元素才能实现滑动效果。
4）编写js调用代码
var Scroll = new iScroll('wrapper',{hScrollbar:false, vScrollbar:false})
第一参数必需是滑动元素的父元素的id。
主要参数一览：
hScroll: true, 左右滑动，默认为true
vScroll: true,上下滑动
hScrollbar: true, 是否显示y轴滚动条，默认为显示
vScrollbar: true,是否显示X轴滚动条，默认为显示
<html><meta http-equiv="content-type" content="text/htmlcharset=gb2312" />
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script language="JavaScript" type="text/javascript">
function get(obj) {
var obj = document.getElementById("qx").value
var obj = obj.split('\n')
var i = 0
var arr_all = new Array()
var exists = document.getElementById('a').childNodes
for (var j=0j<exists.lengthj++) {
if (exists[j].nodeName == 'DIV') {
var exist_url = exists[j].firstChild.nextSibling.value
var exist_name = exists[j].lastChild.previousSibling.innerHTML
var exist = exist_url + '|' + exist_name
arr_all.push(exist, arr_all)
}
}
for (i = 0i <obj.lengthi++) {
obj[i] = trim(obj[i])
if (obj[i] == '') {
continue
}
if (in_array(obj[i], arr_all)) {
continue
}
arr_all.push(obj[i])
var name = obj[i].split("|")[1]
var url = obj[i].split("|")[0]
var iht = ''
iht += '<div><span>上移</span><span>下移</span><input size=80 value='+url+' /><span>'+name+'</span>'
iht +='<input type="button" value=" 删除 " class="inputbtn" onclick="deleteNum(this)" /></div><br>'
document.getElementById("a").innerHTML+=iht
}
document.getElementById("qx").value=""
}
function deleteNum(obj) {
obj.parentNode.parentNode.removeChild(obj.parentNode.nextSibling)
obj.parentNode.parentNode.removeChild(obj.parentNode)
}
function trim(string) {
return string.replace(/(^\s*)|(\s*$)/g, "")
}
function in_array(stringToSearch, arrayToSearch) {
for (s = 0s <arrayToSearch.lengths++) {
thisEntry = arrayToSearch[s].toString()
if (thisEntry == stringToSearch) {
return true
}
}
return false
}
$(document).ready(function() {
//$("div[name=spanFor]").draggable()
$("#a").draggable({axis:'y',grid:[0,20],containment:'parent'})
})
</script>
</head>
<body>
<div id = "a" ></div>
<textarea name="fbaddress" cols="100" rows="5" id="qx">19880101|名字1
19880102|名字2
19880103|名字3
19880104|名字3</textarea>
<input type="button" name="Submit1" value=" 编号 " onclick="get()" class="inputbtn" /><br>
在保证别的功能不变的情况下 实现上移下移
</body>
</html>
首先要包含jquery[jQuery] 两个ul之间li元素的拖拉和排序 HTML代码：
<span class="left">
<b>one</b>
<ul id="list1" style="background-color:#ffee00" name="offJob">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</span>
<span class="left">
<b>two</b>
<ul id="list2" style="background-color:#ffee00" name="onJob">
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>0</li>
</ul>
</span>
jQuery代码：
$(function()
{
$("#list1, #list2").dragsort({
dragBetween: true
})
}
)
需要包含的js文件内容：
(function($) {
$.fn.dragsort = function(options) {
var opts = $.extend({}, $.fn.dragsort.defaults, options)
var lists = new Array()
var list = null, lastPos = null
this.each(function(i, cont) {
var newList = {
draggedItem: null,
placeHolderItem: null,
pos: null,
offset: null,
offsetLimit: null,
container: cont,
init: function() {
$(this.container).attr("listIdx", i).find(opts.dragSelector).css("cursor", "pointer").mousedown(this.grabItem)
},
grabItem: function(e) {
if (e.button == 2)
return
if (list != null &&list.draggedItem != null)
list.dropItem()
$(this).css("cursor", "move")
list = lists[$(this).parents("*[listIdx]").attr("listIdx")]
list.draggedItem = $(this).is(opts.itemSelector) ? $(this) : $(this).parents(opts.itemSelector)
list.offset = list.draggedItem.offset()
list.offset.top = e.pageY - list.offset.top
list.offset.left = e.pageX - list.offset.left
var containerHeight = $(list.container).outerHeight() == 0 ?Math.max(1, Math.round(0.5 +$(list.container).find(opts.itemSelector).size() *list.draggedItem.outerWidth() / $(list.container).outerWidth())) *list.draggedItem.outerHeight() : $(list.container).outerHeight()
list.offsetLimit = $(list.container).offset()
list.offsetLimit.right = list.offsetLimit.left + $(list.container).outerWidth() - list.draggedItem.outerWidth()
list.offsetLimit.bottom = list.offsetLimit.top + containerHeight - list.draggedItem.outerHeight()
list.placeHolderItem =list.draggedItem.clone().html(" ").css({ visibility: "hidden",height: list.draggedItem.height() }).attr("placeHolder", true)
list.draggedItem.after(list.placeHolderItem)
list.draggedItem.css({ position: "absolute", opacity: 0.8 })
$(lists).each(function(i, l) { l.ensureNotEmpty()l.buildPositionTable()})
list.setPos(e.pageX, e.pageY)
$(document).bind("selectstart", list.stopBubble)//stop ie text selection
$(document).bind("mousemove", list.swapItems)
$(document).bind("mouseup", list.dropItem)
return false//stop moz text selection
},
setPos: function(x, y) {
var top = y - this.offset.top
var left = x - this.offset.left
if (!opts.dragBetween) {
top = Math.min(this.offsetLimit.bottom, Math.max(top, this.offsetLimit.top))
left = Math.min(this.offsetLimit.right, Math.max(left, this.offsetLimit.left))
}
this.draggedItem.css({ top: top, left: left })
},
buildPositionTable: function() {
var item = this.draggedItem == null ? null : this.draggedItem.get(0)
var pos = new Array()
$(this.container).find(opts.itemSelector).each(function(i, elm) {
if (elm != item) {
var loc = $(elm).offset()
loc.right = loc.left + $(elm).width()
loc.bottom = loc.top + $(elm).height()
loc.elm = elm
pos.push(loc)
}
})
this.pos = pos
},
dropItem: function() {
if (list.draggedItem == null)
return
$(list.container).find(opts.dragSelector).css("cursor", "pointer")
list.placeHolderItem.before(list.draggedItem)
list.draggedItem.css({ position: "", top: "", left: "", opacity: "" })
list.placeHolderItem.remove()
$("*[emptyPlaceHolder]").remove()
opts.dragEnd.apply(list.draggedItem)
list.draggedItem = null
$(document).unbind("selectstart", list.stopBubble)
$(document).unbind("mousemove", list.swapItems)
$(document).unbind("mouseup", list.dropItem)
return false
},
stopBubble: function() { return false},
swapItems: function(e) {
if (list.draggedItem == null)
return false
list.setPos(e.pageX, e.pageY)
var ei = list.findPos(e.pageX, e.pageY)
var nlist = list
for (var i = 0ei == -1 &&opts.dragBetween &&i <lists.lengthi++) {
ei = lists[i].findPos(e.pageX, e.pageY)
nlist = lists[i]
}
if (ei == -1 || $(nlist.pos[ei].elm).attr("placeHolder"))
return false
if (lastPos == null || lastPos.top >list.draggedItem.offset().top || lastPos.left >list.draggedItem.offset().left)
$(nlist.pos[ei].elm).before(list.placeHolderItem)
else
$(nlist.pos[ei].elm).after(list.placeHolderItem)
$(lists).each(function(i, l) { l.ensureNotEmpty()l.buildPositionTable()})
lastPos = list.draggedItem.offset()
return false
},
findPos: function(x, y) {
for (var i = 0i <this.pos.lengthi++) {
if (this.pos[i].left <x &&this.pos[i].right >x&&this.pos[i].top <y &&this.pos[i].bottom >y)
return i
}
return -1
},
ensureNotEmpty: function() {
if (!opts.dragBetween)
return
var item = this.draggedItem == null ? null : this.draggedItem.get(0)
var emptyPH = null, empty = true
$(this.container).find(opts.itemSelector).each(function(i, elm) {
if ($(elm).attr("emptyPlaceHolder"))
emptyPH = elm
else if (elm != item)
empty = false
})
if (empty &&emptyPH == null)
$(this.container).append(list.placeHolderItem.clone().removeAttr("placeHolder").attr("emptyPlaceHolder", true))
else if (!empty &&emptyPH != null)
$(emptyPH).remove()
}
}
newList.init()
lists.push(newList)
})
return this
}
$.fn.dragsort.defaults = {
itemSelector: "li",
dragSelector: "li",
dragEnd: function() { },
dragBetween: false
}
})(jQuery)
