html5拖动,div拖动

HTML5拖动出现这种问题怎么调试

看下，事件是否完全执行；

var id = e.DataTransfer.getData('Text');

另外建议在chrome下看看 更明确的错误提示。

并且：

e.DataTransfer 没getData 和setData方法。

相关问答

Q1: 做html5拖拽效果，每次拖拽都会新开一个窗口？如何解决？

阻止事件冒泡 e.stopPropagation() IE window.event.cancelBubble = true;

阻止时事件默认 e.preventDefault() IE window.event.returnValue = false;

或者你要把e兼容处理就是 e = e || window.event;

阻止事件冒泡 e.stopPropagation() IE e.cancelBubble = true;

阻止时事件默认 e.preventDefault() IE e.returnValue = false;

Q2: html5中拖拽怎么保留两位小数

DataTransfer对象：退拽传递的对象，一般使用Event.dataTransfer。

2

draggable属性，标签元素设置值为true。drangable=true。

3

ondragstart事件:元素被拖拽的时候触发的事件，作用在被拖拽元素上。

ondragenter事件:进入目标元素触发事件，作用在目标元素上。

ondragover事件:拖拽元素在目标元素上移动的时候触发的事件，作用在目标元素上。

ondrop事件:被拖拽的元素在目标元素上同时鼠标放开触发的事件，作用在目标元素上。

ondragend事件:拖拽完成后触发事件，作用在被拖拽元素上。

Event.preventDefault()方法:阻止默认方法执行。ondragover中一定要执行preventDefault(),否则ondrop事件不会被 触发。

Event.effectAllowed属性:拖拽的效果。

设置元素为可拖放，draggable属性设置为true。img draggable="true"

拖动元素 使用ondragstart事件。setData()设置获取元素。

dataTransfer.setData()方法设置被拖数据类型和值:

function drag(ev){

ev.dataTransfer.setData("Text",ev.target.id);

}

drag(event)声明方法，规定被拖动的数据，类型是"text",值是可拖动元素id获取。

拖拽放入目标 ondragover，ondragover事件规定在何处放置被拖拽的数据。

一定要定义event.preventDefault(),来阻止默认动作。

进行放置 ondrop 当放置被拖数据时，会发生drop事件。

function drop(ev){

ev.preventDefault();

var data=ev.dataTransfer.getData("text");

ev.target.appendChild(document.getElementById(data));

}

Q3: 请问html怎么实现拖动，就是将一个图片拖到另一张图上的制定部分成为一体？

HTML5 的新属性 drag 可以实现这个效果

如果想出现拖动的动画效果 就用 JS 的 onmousedown 和 onmousemove 来实现

Q4: 怎样用html5实现拖拽上传文件

，首先要判断拖入的文件是否符合要求，包括图片类型、大小等，然后获取本地图片信息，实现预览，最后上传。

$(function(){

...接上部分

var box = document.getElementById('drop_area'); //拖拽区域

box.addEventListener("drop",function(e){

e.preventDefault(); //取消默认浏览器拖拽效果

var fileList = e.dataTransfer.files; //获取文件对象

//检测是否是拖拽文件到页面的操作

if(fileList.length == 0){

return false;

}

//检测文件是不是图片

if(fileList[0].type.indexOf('image') === -1){

alert("您拖的不是图片！");

return false;

}

//拖拉图片到浏览器，可以实现预览功能

var img = window.webkitURL.createObjectURL(fileList[0]);

var filename = fileList[0].name; //图片名称

var filesize = Math.floor((fileList[0].size)/1024);

if(filesize500){

alert("上传大小不能超过500K.");

return false;

}

var str = "img src='"+img+"'p图片名称："+filename+"/pp大小："+filesize+"KB/p";

$("#preview").html(str);

//上传

xhr = new XMLHttpRequest();

xhr.open("post", "upload.php", true);

xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");

var fd = new FormData();

fd.append('mypic', fileList[0]);

xhr.send(fd);

},false);

});

[img]

Q5: html5div可随意拖动怎么实现

1、不自定义进度条的话就只能用默认进度条，默认的进度条是集合在video标签中的，这个我们无法实现不能拖动，但是可以模拟下，你可以使用让鼠标点击到视频所在的video或者div的时候无效化，原理就是鼠标选不到进度条，自然不能拖动了。如果你是要可以控制播放和暂停的话就实现js控制，反正是跳过video自带的控制器自己去写。2、用个透明的层或图片把进度条盖住