如何用JavaScript从头开始实现拖放div?
它应该是CSS和JavaScript的组合。应采取的步骤如下:如何用JavaScript从头开始实现拖放div?,javascript,html,css,drag-and-drop,Javascript,Html,Css,Drag And Drop,它应该是CSS和JavaScript的组合。应采取的步骤如下: 将其置于所有其他元素之上(要指定哪个属性?) 单击事件时捕获该事件(要侦听哪个事件?) 在鼠标移动时移动div 但是细节是什么呢?jQuery方式: 查看插件和 实际上,jQuery框架已经投入了数百个小时,使得像这样的复杂任务变得几乎微不足道。利用jQuery团队的努力,让编写丰富的跨浏览器应用程序变得更容易;) 查克·诺里斯的方式: 如果您坚持使用原始javascript尝试此操作。你会想做一些事情。第一,以编程方式将所有可拖动
/**
*Drag.js:拖动绝对定位的HTML元素。
*
*此模块定义一个设计用于调用的drag()函数
*从onmousedown事件处理程序。随后的mousemove事件将
*移动指定的元素。鼠标悬停事件将终止拖动。
*如果元素被拖离屏幕,则窗口不会滚动。
*此实现可与DOM级别2事件模型和
*IE事件模型。
*
*论据:
*
*elementToDrag:接收mousedown事件或
*一些包含元素。它必须绝对定位。它的
*style.left和style.top值将根据用户的
*拖。
*
*事件:mousedown事件的事件对象。
*
*如何使用此功能的示例:
*
*
*
*
*
*拖我
*
*
*这是一个测试。测试,测试,测试。这是一个测试。测试。
*
*
*作者:大卫·弗拉纳根;Javascript:权威指南(O'Reilly)
*页码:422
**/
函数拖动(elementToDrag,事件)
{
//鼠标位置(在窗口坐标中)
//阻力开始的位置
var startX=event.clientX,startY=event.clientY;
//文件的原始位置(在文档坐标中)
//要拖动的元素。因为elementToDrag是
//绝对定位,我们假设其抵销母公司为
//文件bodt。
var origX=elementToDrag.offsetLeft,origY=elementToDrag.offsetTop;
//即使坐标是以不同的方式计算的
//坐标系,我们仍然可以计算它们之间的差异
//并在moveHandler()函数中使用它
//拖动过程中,滚动条的位置不会改变。
var deltaX=startX-origX,deltaY=startY-origY;
//注册将响应mousemove事件的事件处理程序
//以及此mousedown事件之后的mouseup事件。
if(document.addEventListener)//DOM级别2事件模型
{
//注册捕获事件处理程序
document.addEventListener(“mousemove”,moveHandler,true);
document.addEventListener(“mouseup”,upHandler,true);
}
else if(document.attachEvent)//IE 5+事件模型
{
//在IE事件模型中,我们通过调用
//在元素上设置setCapture()以捕获它们。
elementToDrag.setCapture();
elementToDrag.attachEvent(“onmousemove”,moveHandler);
elementToDrag.attachEvent(“onmouseup”,upHandler);
//将丢失鼠标捕获视为mouseup事件。
elementToDrag.attachEvent(“onclosecapture”,upHandler);
}
else//ie4事件模型
{
//在IE 4中,我们不能使用attachEvent()或setCapture(),因此我们设置
//事件处理程序直接处理文档对象,并希望
//我们需要的鼠标事件将出现。
var oldmovehandler=document.onmousemove;//由upHandler()使用
var olduphandler=document.onmouseup;
document.onmousemove=moveHandler;
document.onmouseup=upHandler;
}
//我们已经处理了这件事,别让别人看到。
if(event.stoptropagation)event.stoptropagation();//DOM级别2
else event.cancelBubble=true;//IE
//现在阻止任何默认操作。
if(event.preventDefault)event.preventDefault();//DOM级别2
else event.returnValue=false;//IE
/**
*这是一个处理程序,当元素
*正在拖动。它负责移动元素。
**/
函数moveHandler(e)
{
如果(!e)e=window.event;//IE事件模型
//将元素移动到当前鼠标位置,并根据需要进行调整
//初始鼠标单击的偏移量所需。
elementToDrag.style.left=(e.clientX-deltaX)+“px”;
elementToDrag.style.top=(e.clientY-deltaY)+“px”;
//不要让任何人看到这件事。
if(e.stopPropagation)e.stopPropagation();//DOM级别2
else e.cancelBubble=true;//IE
}
/**
*这是捕获最终mouseup事件的处理程序
*在拖动结束时发生。
**/
函数upHandler(e)
{
如果(!e)e=window.event;//IE事件模型
//注销捕获事件处理程序。
如果(文件)
/**
* Drag.js: drag absolutely positioned HTML elements.
*
* This module defines a single drag() function that is designed to be called
* from an onmousedown event handler. Subsequent mousemove event will
* move the specified element. A mouseup event will terminate the drag.
* If the element is dragged off the screen, the window does not scroll.
* This implementation works with both the DOM Level 2 event model and the
* IE event model.
*
* Arguments:
*
* elementToDrag: the element that received the mousedown event or
* some containing element. It must be absolutely positioned. Its
* style.left and style.top values will be changed based on the user's
* drag.
*
* event: ethe Event object for the mousedown event.
*
* Example of how this can be used:
* <script src="Drag.js"></script> <!-- Include the Drag.js script -->
* <!-- Define the element to be dragged -->
* <div style="postion:absolute; left:100px; top:100px; width:250px;
* background-color: white; border: solid black;">
* <!-- Define the "handler" to drag it with. Note the onmousedown attribute. -->
* <div style="background-color: gray; border-bottom: dotted black;
* padding: 3px; font-family: sans-serif; font-weight: bold;"
* onmousedown="drag(this.parentNode, event);">
* Drag Me <!-- The content of the "titlebar" -->
* </div>
* <!-- Content of the draggable element -->
* <p>This is a test. Testing, testing, testing.<p>This is a test.<p>Test.
* </div>
*
* Author: David Flanagan; Javascript: The Definitive Guide (O'Reilly)
* Page: 422
**/
function drag(elementToDrag, event)
{
// The mouse position (in window coordinates)
// at which the drag begins
var startX = event.clientX, startY = event.clientY;
// The original position (in document coordinates) of the
// element that is going to be dragged. Since elementToDrag is
// absolutely positioned, we assume that its offsetParent is the
//document bodt.
var origX = elementToDrag.offsetLeft , origY = elementToDrag.offsetTop;
// Even though the coordinates are computed in different
// coordinate systems, we can still compute the difference between them
// and use it in the moveHandler() function. This works because
// the scrollbar positoin never changes during the drag.
var deltaX = startX - origX, deltaY = startY - origY;
// Register the event handlers that will respond to the mousemove events
// and the mouseup event that follow this mousedown event.
if (document.addEventListener) //DOM Level 2 event model
{
// Register capturing event handlers
document.addEventListener("mousemove", moveHandler, true);
document.addEventListener("mouseup", upHandler, true);
}
else if (document.attachEvent) //IE 5+ Event Model
{
//In the IE event model, we capture events by calling
//setCapture() on the element to capture them.
elementToDrag.setCapture();
elementToDrag.attachEvent("onmousemove", moveHandler);
elementToDrag.attachEvent("onmouseup", upHandler);
// Treat loss of mouse capture as a mouseup event.
elementToDrag.attachEvent("onclosecapture", upHandler);
}
else //IE 4 Event Model
{
// In IE 4, we can't use attachEvent() or setCapture(), so we set
// event handlers directly on the document object and hope that the
// mouse event we need will bubble up.
var oldmovehandler = document.onmousemove; //used by upHandler()
var olduphandler = document.onmouseup;
document.onmousemove = moveHandler;
document.onmouseup = upHandler;
}
// We've handled this event. Don't let anybody else see it.
if (event.stopPropagation) event.stopPropagation(); // DOM Level 2
else event.cancelBubble = true; // IE
// Now prevent any default action.
if (event.preventDefault) event.preventDefault(); // DOM Level 2
else event.returnValue = false; // IE
/**
* This is the handler that captures mousemove events when an element
* is being dragged. It is responsible for moving the element.
**/
function moveHandler(e)
{
if (!e) e = window.event; // IE Event Model
// Move the element to the current mouse position, adjusted as
// necessary by the offset of the initial mouse-click.
elementToDrag.style.left = (e.clientX - deltaX) + "px";
elementToDrag.style.top = (e.clientY - deltaY) + "px";
// And don't let anyone else see this event.
if (e.stopPropagation) e.stopPropagation(); // DOM Level 2
else e.cancelBubble = true; // IE
}
/**
* This is the handler that captures the final mouseup event that
* occurs at the end of a drag.
**/
function upHandler(e)
{
if (!e) e = window.event; //IE Event Model
// Unregister the capturing event handlers.
if (document.removeEventListener) // DOM event model
{
document.removeEventListener("mouseup", upHandler, true);
document.removeEventListener("mousemove", moveHandler, true);
}
else if (document.detachEvent) // IE 5+ Event Model
{
elementToDrag.detachEvent("onlosecapture", upHandler);
elementToDrag.detachEvent("onmouseup", upHandler);
elementToDrag.detachEvent("onmousemove", moveHandler);
elementToDrag.releaseCapture();
}
else //IE 4 Event Model
{
//Restore the original handlers, if any
document.onmouseup = olduphandler;
document.onmousemove = oldmovehandler;
}
// And don't let the event propagate any further.
if (e.stopPropagation) e.stopPropagation(); //DOM Level 2
else e.cancelBubble = true; //IE
}
}
function closeMe(elementToClose)
{
elementToClose.innerHTML = '';
elementToClose.style.display = 'none';
}
function minimizeMe(elementToMin, maxElement)
{
elementToMin.style.display = 'none';
}
<!DOCTYPE HTML>
<html>
<head>
<script>
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>
<style>
.draggable {
border: 1px solid black;
width: 30px;
height: 20px;
float: left;
margin-right: 5px;
}
#target {
border: 1px solid black;
width: 150px;
height: 100px;
padding: 5px;
}
</style>
</head>
<body>
<h1>Drag and Drop</h1>
<h2>Target</h2>
<div id="target" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<h2>Draggable Elements</h2>
<div id="draggable1" class="draggable" draggable="true" ondragstart="drag(event)"></div>
<div id="draggable2" class="draggable" draggable="true" ondragstart="drag(event)"></div>
<div id="draggable3" class="draggable" draggable="true" ondragstart="drag(event)"></div>
</body>
</html>
<body>
<div id="dragme" draggable="true">Drag Me</div>
<div id="dropzone">Drop Here</div>
</body>
<script>
var dragme = document.getElementById('dragme')
var dropzone = document.getElementById('dropzone')
dragme.addEventListener('dragstart',function(e){
dropzone.innerHTML = "drop here"
})
dropzone.addEventListener('dragover',function(e){
e.preventDefault()
})
dropzone.addEventListener('drop',function(e){
e.preventDefault()
dropzone.innerHTML = "dropped"
})
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
body,
html {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
#box {
width: 100px;
height: 100px;
margin: auto;
background-color: lightblue;
}
#box:active {
border: 1px solid black;
box-shadow: 2px 2px 5px 5px #bbb6b6;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script>
var box = document.getElementById("box");
var diff = {};
var getBoxPos = function() {
return {
x: box.getBoundingClientRect().x,
y: box.getBoundingClientRect().y
};
};
var calcDiff = function(x, y) {
var boxPos = getBoxPos();
diff = {
x: x - boxPos.x,
y: y - boxPos.y
};
};
var handleMouseMove = function(event) {
var x = event.x;
var y = event.y;
x -= diff.x;
y -= diff.y;
console.log("X " + x + " Y " + y);
box.style.position = "absolute";
box.style.transform = "translate(" + x + "px ," + y + "px)";
};
box.addEventListener("mousedown", function(e) {
calcDiff(e.x, e.y);
box.addEventListener("mousemove", handleMouseMove, true);
});
box.addEventListener("mouseup", function(e) {
console.log("onmouseup");
box.removeEventListener("mousemove", handleMouseMove, true);
});
</script>
</html>