Gemeinschaft Lernen Tools-Bibliothek Freizeit

Deutsch

Heim > Web-Frontend > js-Tutorial > javascript简单拖拽实现代码(鼠标事件 mousedown mousemove mouseup)_javascript技巧

javascript简单拖拽实现代码(鼠标事件 mousedown mousemove mouseup)_javascript技巧

WBOY

Freigeben： 2016-05-16 17:53:17

Original

1548 Leute haben es durchsucht

mousedown 的时候创建拖动对象，mouseup的时候释放对象，原理弄清楚了其实很简单。

简单拖拽实现代码：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>简单拖拽实现</title> 
<style type="text/css"> 
*{margin:0;padding:0;} 
#box{ margin:20px auto; position:relative; width:400px; height:400px; background:#ccc; border:1px solid #333; postion:relative; } 
#dragBox{ width:50px; height:50px; text-align:center; line-height: 50px;position: absolute; background:blue; cursor:move; font-size:12px; color:#fff;} 
</style> 
 
 
<div id="box"> 
<div id="dragBox">拖我</div> 
</div> 
<script type="text/javascript"> 
var VVG = {}; //命名空间 
VVG.DOM = { 
$: function(id) { //创建方便的选择符 
return typeof id == "string" ? document.getElementById(id) : id; 
}, 
bindEvent: function(node, type, func) { //事件绑定方法 
if (node.addEventListener) { 
node.addEventListener(type, func, false); 
} else if (node.attachEvent) { 
node.attachEvent("on" + type, func); 
} else { 
node["on" + type] = func; 
} 
}, 
getEvent: function(event) { //获取事件 
return event ? event : window.event; 
}, 
getTarget: function(event) { //获取事件目标 
return event.target || event.srcElement; 
} 
} 
var DragDrop = function() { //新建一个返回对象的函数 
var box = VVG.DOM.$("box"); //获取外围BOX 
var dragBox = VVG.DOM.$("dragBox");//获取需要拖动的BOX 
var dragging = null; //初始化对象 
function drag(event) { //事件执行函数 
event = VVG.DOM.getEvent(event); 
var target = VVG.DOM.getTarget(event); 
switch (event.type) {//判断事件类型 
case "mousedown": 
if(target.id == "dragBox"){ //当事件对象的ID等于要拖动的BOX的ID时 
dragging = target; //赋值到拖动目标 
} 
break; 
case "mousemove": 
if(dragging){ //当有拖动目标时执行 
sTop = document.documentElement.scrollTop || document.body.scrollTop; //当有滚动条的时候卷去页面的高度 
dragging.style.left = (event.clientX - box.offsetLeft - dragBox.offsetWidth/2) + "px"; 
dragging.style.top = (event.clientY + sTop - box.offsetTop - dragBox.offsetHeight/2 ) + "px"; 
var left = parseInt(dragging.style.left); 
var top = parseInt(dragging.style.top); 
//console.log("left:"+left+"-----top:"+top + "-------sTop:"+sTop); 
// 比较坐标是否超出外围的BOX 
if(left < 0){ 
dragging.style.left = 0 +"px"; 
} 
if(top < 0){ 
dragging.style.top = 0+"px"; 
} 
if(left > box.offsetWidth - dragBox.offsetWidth){ 
dragging.style.left = (box.offsetWidth - dragBox.offsetWidth - 2 )+"px"; 
} 
if(top > box.offsetHeight - dragBox.offsetHeight){ 
dragging.style.top =( box.offsetHeight - dragBox.offsetHeight - 2 )+"px"; 
} 
} 
break; 
case "mouseup": 
// 清空拖动目标 
dragging = null; 
break; 
} 
}; 
return { 
dragStart: function() { 
// 绑定事件 
VVG.DOM.bindEvent(document, "mousedown", drag); 
VVG.DOM.bindEvent(document, "mousemove", drag); 
VVG.DOM.bindEvent(document, "mouseup", drag); 
} 
} 
}(); 
DragDrop.dragStart(); 
</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

Verwandte Etiketten：

简单拖拽

Quelle：php.cn

Vorheriger Artikel：setTimeout的延时为0时多个浏览器的区别_javascript技巧 Nächster Artikel：jQuery 瀑布流绝对定位布局（二）(延迟AJAX加载图片)_jquery

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors

Was ist eine NullPointerException und wie behebe ich sie?

2024-10-22 09:46:29
Vom Anfänger zum Programmierer: Ihre Reise beginnt mit C-Grundlagen

2024-10-13 13:53:41
Webentwicklung mit PHP freischalten: Ein Leitfaden für Anfänger

2024-10-12 12:15:51
C entmystifizieren: Ein klarer und einfacher Weg für neue Programmierer

2024-10-11 22:47:31
Entfalten Sie Ihr Programmierpotenzial: C-Programmierung für absolute Anfänger

2024-10-11 19:36:51
Entfesseln Sie Ihren inneren Programmierer: C für absolute Anfänger

2024-10-11 15:50:41
Automatisieren Sie Ihr Leben mit C: Skripte und Tools für Anfänger

2024-10-11 15:07:41
PHP leicht gemacht: Ihre ersten Schritte in der Webentwicklung

2024-10-11 14:21:21
Erstellen Sie alles mit Python: Ein Leitfaden für Anfänger, um Ihrer Kreativität freien Lauf zu lassen

2024-10-11 12:59:11
Der Schlüssel zum Programmieren: Die Leistungsfähigkeit von Python für Anfänger freischalten

2024-10-11 12:17:31

Aktuelle Ausgaben

So lösen Sie das mysteriöse Leerzeichen am unteren Rand der Seite in CSS Ich versuche, mit Bootstrap und D3 eine einfache Webseite zu erstellen, weiß aber nicht, w...

Aus 2024-04-06 20:22:15

0

1

454

Ungültiges untergeordnetes React-Element (gefunden: Objekt mit Schlüssel {clientVersion}). Wenn Sie eine Sammlung untergeordneter Elemente rendern möchten, verwenden Sie stattdessen ein Array Ich habe ein mehrstufiges Formular und wenn ich versuche, es abzusenden, wird dieser Fehle...

Aus 2024-04-06 16:25:39

0

1

346

Öffnen Sie Berechnungsdokumente mit window.open() und data: scheme Ich habe eine Webseite, die in einem Browser ausgeführt wird, der ein berechnetes HTML-Dok...

Aus 2024-04-06 15:06:34

0

1

378

Warum läuft ein untergeordnetes Raster mit einer festen Breite und einer maximalen Breite von 90 % über die Rasterspur hinaus? Frage: Meine Frage ist ganz einfach: Ich möchte wissen, warum das .header-Element seine Ra...

Aus 2024-04-05 14:33:39

0

1

1426

Die JavaScript-Funktion hat keinen Einfluss auf das Klicken auf die Schaltfläche Ich habe im Internet gesucht und viele Dinge ausprobiert, bin aber bei einem relativ einfa...

Aus 2024-04-05 13:14:53

0

2

1433

verwandte Themen

Mehr>

Beliebte Empfehlungen

Beliebte Tutorials

Mehr>

Verwandte Tutorials

Beliebte Empfehlungen

Aktuelle Kurse

Neueste Downloads

Mehr>

Web-Effekte

Quellcode der Website

Website-Materialien

Frontend-Vorlage