HTML 5 拖放
HTML5 音频
HTML5 画布
拖放（Drag 和 drop）是 HTML5 标准的组成部分。
拖放
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
浏览器支持
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
注释：在 Safari 5.1.2 中不支持拖放。
HTML5 拖放实例
下面的例子是一个简单的拖放实例：
实例
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault()
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id)
}
function drop(ev)
{
ev.preventDefault()
var data=ev.dataTransfer.getData("Text")
ev.target.appendChild(document.getElementById(data))
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69" />
</body>
</html>
亲自试一试
它看上去也许有些复杂，不过我们可以分别研究拖放事件的不同部分。
设置元素为可拖放
首先，为了使元素可拖动，把 draggable 属性设置为 true ：
<img draggable="true" />
拖动什么 - ondragstart 和 setData()
然后，规定当元素被拖动时，会发生什么。
在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。
dataTransfer.setData() 方法设置被拖数据的数据类型和值：
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id)
}
在这个例子中，数据类型是 "Text"，值是可拖动元素的 id ("drag1")。
放到何处 - ondragover
ondragover 事件规定在何处放置被拖动的数据。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法：
event.preventDefault()
进行放置 - ondrop
当放置被拖数据时，会发生 drop 事件。
在上面的例子中，ondrop 属性调用了一个函数，drop(event)：
function drop(ev)
{
ev.preventDefault()
var data=ev.dataTransfer.getData("Text")
ev.target.appendChild(document.getElementById(data))
}
代码解释：
调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
被拖数据是被拖元素的 id ("drag1")
把被拖元素追加到放置元素（目标元素）中
在拖放的过程中会触发以下事件：
在拖动目标上触发事件 (源元素)
ondragstart - 用户开始拖动元素时触发
ondrag - 元素正在拖动时触发
ondragend - 用户完成元素拖动后触发
释放目标时触发的事件
ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop - 在一个拖动过程中，释放鼠标键时触发此事件
event对象（以e代替）
e.target
W3Cschool上的解释是：返回触发此事件的元素（事件的目标节点），这个target属性只兼容ie9及以上
e.preventDefault()
取消事件的默认动作。
e.dataTransfer.setData()
设置被拖数据的数据类型和值。
e.dataTransfer.getData()
获得被拖的数据。
jQuery拖拽通过八个点改变div大小js:
(function($) {
/**
* 默认参数
*/
var defaultOpts = {
stage: document, //舞台
item: 'resize-item', //可缩放的类名
}
/**
* 定义类
*/
var ZResize = function(options) {
this.options = $.extend({}, defaultOpts, options)
this.init()
}
ZResize.prototype = {
init: function() {
this.initResizeBox()
},
/**
* 初始化拖拽item
*/
initResizeBox: function() {
var self = this
$(self.options.item).each(function () {
//创建面板
var width = $(this).width()
var height = $(this).height()
var resizePanel = $('<div class"resize-panel"></div>')
resizePanel.css({
width: width,
height: height,
top: 0,
left: 0,
position: 'absolute',
'background-color': 'rgba(0,0,0,0.5)',
cursor: 'move',
display: 'none'
})
self.appendHandler(resizePanel, $(this))
/**
* 创建控制点
*/
var n = $('<div class="n"></div>')//北
var s = $('<div class="s"></div>')//南
var w = $('<div class="w"></div>')//西
var e = $('<div class="e"></div>')//东
var ne = $('<div class="ne"></div>')//东北
var nw = $('<div class="nw"></div>')//西北
var se = $('<div class="se"></div>')//东南
var sw = $('<div class="sw"></div>')//西南
//添加公共样式
self.addHandlerCss([n, s, w, e, ne, nw, se, sw])
//添加各自样式
n.css({
'top': '-4px',
'margin-left': '-4px',
'left': '50%',
'cursor': 'n-resize'
})
s.css({
'bottom': '-4px',
'margin-left': '-4px',
'left': '50%',
'cursor': 's-resize'
})
e.css({
'top': '50%',
'margin-top': '-4px',
'right': '-4px',
'cursor': 'e-resize'
})
w.css({
'top': '50%',
'margin-top': '-4px',
'left': '-4px',
'cursor': 'w-resize'
})
ne.css({
'top': '-4px',
'right': '-4px',
'cursor': 'ne-resize'
})
nw.css({
top: '-4px',
'left': '-4px',
'cursor': 'nw-resize'
})
se.css({
'bottom': '-4px',
'right': '-4px',
'cursor': 'se-resize'
})
sw.css({
'bottom': '-4px',
'left': '-4px',
'cursor': 'sw-resize'
})
// 添加项目
self.appendHandler([n, s, w, e, ne, nw, se, sw], resizePanel)
//绑定拖拽缩放事件
self.bindResizeEvent(resizePanel, $(this))
//绑定触发事件
self.bindTrigger($(this))
})
self.bindHidePanel()
},
//控制点公共样式
addHandlerCss: function(els) {
for(var i = 0i <els.lengthi++) {
el = els[i]
el.css({
position: 'absolute',
width: '8px',
height: '8px',
background: '#ff6600',
margin: '0',
'border-radius': '2px',
border: '1px solid #dd5500',
})
}
},
/**
* 插入容器
*/
appendHandler: function(handlers, target) {
for(var i = 0i <handlers.lengthi++) {
el = handlers[i]
target.append(el)
}
},
/**
* 显示拖拽面板
*/
triggerResize: function(el) {
var self = this
el.siblings(self.options.item).children('div').css({
display: 'none'
})
el.children('div').css({
display: 'block'
})
},
/**
* 拖拽事件控制 包含8个缩放点 和一个拖拽位置
*/
bindResizeEvent: function(el) {
var self = this
var ox = 0//原始事件x位置
var oy = 0//原始事件y位置
var ow = 0//原始宽度
var oh = 0//原始高度
var oleft = 0//原始元素位置
var otop = 0
var org = el.parent('div')
//东
var emove = false
el.on('mousedown','.e', function(e) {
ox = e.pageX//原始x位置
ow = el.width()
emove = true
})
//南
var smove = false
el.on('mousedown','.s', function(e) {
oy = e.pageY//原始x位置
oh = el.height()
smove = true
})
//西
var wmove = false
el.on('mousedown','.w', function(e) {
ox = e.pageX//原始x位置
ow = el.width()
wmove = true
oleft = parseInt(org.css('left').replace('px', ''))
})
//北
var nmove = false
el.on('mousedown','.n', function(e) {
oy = e.pageY//原始x位置
oh = el.height()
nmove = true
otop = parseInt(org.css('top').replace('px', ''))
})
//东北
var nemove = false
el.on('mousedown','.ne', function(e) {
ox = e.pageX//原始x位置
oy = e.pageY
ow = el.width()
oh = el.height()
nemove = true
otop = parseInt(org.css('top').replace('px', ''))
})
//西北
var nwmove = false
el.on('mousedown','.nw', function(e) {
ox = e.pageX//原始x位置
oy = e.pageY
ow = el.width()
oh = el.height()
otop = parseInt(org.css('top').replace('px', ''))
oleft = parseInt(org.css('left').replace('px', ''))
nwmove = true
})
//东南
var semove = false
el.on('mousedown','.se', function(e) {
ox = e.pageX//原始x位置
oy = e.pageY
ow = el.width()
oh = el.height()
semove = true
})
//西南
var swmove = false
el.on('mousedown','.sw', function(e) {
ox = e.pageX//原始x位置
oy = e.pageY
ow = el.width()
oh = el.height()
swmove = true
oleft = parseInt(org.css('left').replace('px', ''))
})
//拖拽
var drag = false
el.on('mousedown', function(e) {
ox = e.pageX//原始x位置
oy = e.pageY
otop = parseInt(org.css('top').replace('px', ''))
oleft = parseInt(org.css('left').replace('px', ''))
drag = true
})
$(self.options.stage).on('mousemove', function(e) {
if(emove) {
var x = (e.pageX - ox)
el.css({
width: ow + x
})
org.css({
width: ow + x
})
} else if(smove) {
var y = (e.pageY - oy)
el.css({
height: oh + y
})
org.css({
height: oh + y
})
} else if(wmove) {
var x = (e.pageX - ox)
el.css({
width: ow - x,
// left: oleft + x
})
org.css({
width: ow - x,
left: oleft + x
})
} else if(nmove) {
var y = (e.pageY - oy)
el.css({
height: oh - y,
// top: otop + y
})
org.css({
height: oh - y,
top: otop + y
})
} else if(nemove) {
var x = e.pageX - ox
var y = e.pageY - oy
el.css({
height: oh - y,
// top: otop + y,
width: ow + x
})
org.css({
height: oh - y,
top: otop + y,
width: ow + x
})
} else if(nwmove) {
var x = e.pageX - ox
var y = e.pageY - oy
el.css({
height: oh - y,
// top: otop + y,
width: ow - x,
// left: oleft + x
})
org.css({
height: oh - y,
top: otop + y,
width: ow - x,
left: oleft + x
})
} else if(semove) {
var x = e.pageX - ox
var y = e.pageY - oy
el.css({
width: ow + x,
height: oh + y
})
org.css({
width: ow + x,
height: oh + y
})
} else if(swmove) {
var x = e.pageX - ox
var y = e.pageY - oy
el.css({
width: ow - x,
// left: oleft + x,
height: oh + y
})
org.css({
width: ow - x,
left: oleft + x,
height: oh + y
})
} else if(drag) {
var x = e.pageX - ox
var y = e.pageY - oy
org.css({
left: oleft + x,
top: otop + y
})
}
}).on('mouseup', function(e) {
emove = false
smove = false
wmove = false
nmove = false
nemove = false
nwmove = false
swmove = false
semove = false
drag = false
})
},
/**
* 点击item显示拖拽面板
*/
bindTrigger: function(el) {
var self = this
el.on('click', function(e) {
e.stopPropagation()
self.triggerResize(el)
})
},
/**
* 点击舞台空闲区域 隐藏缩放面板
*/
bindHidePanel: function(el) {
var stage = this.options.stage
var item = this.options.item
$(stage).bind('click', function() {
$(item).children('div').css({
display: 'none'
})
})
}
}
window.ZResize = ZResize
})(jQuery)
html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery拖拽放大缩小插件idrag</title>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8">
<style type="text/css">
.item1 {
width: 405px
height: 291px
cursor: move
position: absolute
top: 30px
left: 30px
background-color: #FFF
border: 1px solid #CCCCCC
-webkit-box-shadow: 10px 10px 25px #ccc
-moz-box-shadow: 10px 10px 25px #ccc
box-shadow: 10px 10px 25px #ccc
}
.item2 {
width: 200px
height: 100px
cursor: move
position: absolute
top: 400px
left: 100px
background-color: #FFF
border: 1px solid #CCCCCC
-webkit-box-shadow: 10px 10px 25px #ccc
-moz-box-shadow: 10px 10px 25px #ccc
box-shadow: 10px 10px 25px #ccc
line-height: 100px
text-align: center
}
body {
background-color: #F3F3F3
}
</style>
</head>
<body>
<div id="mydiv" style="width:800pxheight:800pxborder-style:solid">
<div id="div1" class="resize-item item1">
<img src="images/dog.png" width="100%" height="100%">
</div>
<div class="resize-item item2">
你是我的小小狗
</div>
</div>
<script src="jquery.min.js"></script>
<script type="text/javascript" src='jquery.ZResize.js'></script>
<script type="text/javascript">
new ZResize({
stage: "#mydiv", //舞台
item: '#div1', //可缩放的类名
})
</script>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）