在HTML中，拖动比较麻烦需要不断的运算拖动的距离，还有有很多的代码，今天就来演示拖动的效果与代码的实现，好了废话不多说，上一个相互都可以投放与拖动的代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
article{
margin:200px auto;
width: 400px;
height: 60px;
border: 1px solid red;
}
div{
width: 100px;
height: 40px;
margin: 10px auto;
margin-left: 65px;
border: 1px solid darkgray;
float: left;
}
div img{
margin: 5px 6px ;
}
</style>
</head>
<body>
<article>
<div id="dropBlock"><img id="img" src="w3school_logo_black.gif"></div>
<div id="moveBlock"></div>
</article>
</body>
<script>
(function(){
var img=document.getElementById("img")
var divs=document.getElementsByTagName("div")
for(var i=0;i<divs.length;i++){
divs[i].ondragover=function(e){
e.preventDefault();
}
divs[i].ondrop=function(e){
this.appendChild(img);
}
}
})();
//封装document.getElementById();
function $() {
var elements = new Array();
for (var i = arguments.length - 1; i >= 0; i--) {
var element = arguments[i];
if (typeof element == "string") {
element = document.getElementById(element);
}
if (arguments.length == 1) {
return element;
} else {
elements.push(element);
}
return elements;
};
};
//封装事件处理
function addEvent(node, type, listener) {
if (!(node = $(node))) return false;
if (node.addEventListener) {
//W3C
node.addEventListener(type, listener, false);
return true;
} else if (node.attachEvent) {
node[‘e‘ + type + listener] = listener;
node[type + listener] = function() {
node[‘e‘ + type + listener](window.event);
};
node.attachEvent(‘on‘ + type, node[type + listener]);
return true;
}
return false;
};
//移出事件
function removeEvent(node,type,listener){
if (!(node = $(node))) return false;
if(node.removeEventListener){
node.removeEventListener(type,listener,false);
return true;
}else if(node.removeEvent){
node.detachEvent(‘on‘+type,node[type+listener]);
node[type+listener] = null;
return true;
}
return false;
};
//获取事件对象
function getEventObject(e){
return e || window.event;
}
//阻止事件冒泡
function stopPropagation(eventObject){
var eventObject = eventObject || getEventObject();
if(eventObject.stopPropagation){
eventObject.stopPropagation();
}else{
eventObject.cancelBubble = true;
}
};
//阻止浏览器默认 事件
function stopDefault(eventObject){
var eventObject = eventObject || getEventObject();
if(eventObject.preventDefault){
eventObject.preventDefault();
}else{
eventObject.returnValue = false;
}
};
//获取鼠标点击时的x和y坐标
function getPointerPositionInDocument(eventObject) {
eventObject = eventObject || getEventObject(eventObject);
var x = eventObject.pageX || (eventObject.clientX +
(document.documentElement.scrollLeft || document.body.scrollLeft));
var y = eventObject.pageY || (eventObject.clientY +
(document.documentElement.scrollTop || document.body.scrollTop));
return {
‘x‘: x,
‘y‘: y
};
};
//获取文档的宽和高
function getWindowSize(){
var width = height = 0;
if(this.innerWidth){
width = this.innerWidth;
height = this.innerHeight;
}else if(document.documentElement && document.documentElement.clientHeight){
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
}else if(document.body && document.body.clientHeight){
width = document.body.clientWidth;
height = document.body.clientHeight;
}
return {‘width‘:width,‘height‘:height};
};
//获取标签的宽、高和left、top
function getDimensions(element){
if (!(element = $(element))) return false;
return {
‘left‘:element.offsetLeft,
‘top‘:element.offsetTop,
‘width‘:element.offsetWidth,
‘height‘:element.offsetHeight
};
}
//设置标签样式
function setStyle(element, styles) {
if (!(element = $(element))) return false;
for (property in styles) {
if (!styles.hasOwnProperty(property)) continue;
if (element.style.setProperty) {
element.style.setProperty(
uncamelize(property, ‘-‘), styles[property], null);
} else {
element.style[camelize(property)] = styles[property];
}
}
return true;
};
//将-形式的字符串转换为驼峰命名法的字符串
function camelize(s) {
return s.replace(/-(\w)/g, function(strMatch, p1) {
return p1.toUpperCase();
});
};
//将驼峰命名法的字符串转换为-形式的字符串
function uncamelize(s, sep) {
sep = sep || ‘-‘;
return s.replace(/([a-z])([A-Z])/g, function(strMatch, p1, p2) {
return p1 + sep + p2.toLowerCase();
});
};
</script>
</html>
在这当中要理解其中拖动的步骤，在拖动时步骤一个是七个，它可以分为七个事件，分别是：开始拖动，拖动中，拖动结束，进入投放区，投放区移动，投放，离开投放区，这个七个步骤不要乱找好位置，同时是一步执行，同时还有一个很重要的一个因数——阻止默认事件，在浏览器中有默认事件，这个有好有坏，看个人理解。
时间： 2024-08-03 09:44:01