js移动div怎么做出滑动的效果？

JavaScript017

js移动div怎么做出滑动的效果？,第1张

1：使用js的插件 目前主流的js库 比如jq 也有手势的插件，

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)