JavaScript 在网页上拖放一个 Div [重复]

Posted

技术标签:

【中文标题】JavaScript 在网页上拖放一个 Div [重复]【英文标题】:JavaScript Drag/Drop a Div on a Web Page [duplicate] 【发布时间】:2013-03-24 09:59:12 【问题描述】:

我正在尝试编写一些 javascript 代码,让我可以在网页上移动 div。也就是说,我想这样做,以便您可以单击并将 div 从页面上的一个位置拖动到另一个位置。我的 JavaScript 似乎不合作。但是,我觉得我犯了一个非常简单的错误。或许另一双眼睛能发现我的问题?

感谢任何cmets。

下面是我的 JS、CSS 和 html

JavaScript:

function getStyle(object, styleName) 
    if (window.getComputedStyle) 
        return document.defaultView.getComputedStyle(object, null).getPropertyValue(styleName);
     else if (object.currentStyle) 
        return object.currentStyle[styleName];
    


function grabCalculator(e) 
    var evt = e || window.event;
    calculator = evt.target || evt.srcElement;
    var mousex = evt.clientX;
    var mousey = evt.clientY;
    diffx = parseInt(calculator.style.left) + mousex;
    diffy = parseInt(calculator.style.top) + mousey;
    addEvent(document, "mousemove", moveCalculator, false);
    addEvent(document, "mouseup", dropCalculator, false);


function moveCalculator(e) 
    var evt = e || window.event;
    var mousex = evt.clientX;
    var mousey = evt.clientY;
    calculator.style.left = mousex + diffx + "px";
    calculator.style.top = mousey + diffy + "px";


function addEvent(obj, eventType, fnName, cap) 
                            alert("TEST");
    if (obj.attachEvent) 
        obj.attachEvent("on" + eventType, fnName);
     else 
        obj.addEventListener(eventType, fnName, cap);
    


function removeEvent(obj, eventType, fnName, cap) 
    if (obj.attachEvent) 
        obj.detachEvent("off" + eventType, fnName);
     else 
        obj.removeEventListener(eventType, fnName, cap);
    


function dropCalculator(e) 
    removeEvent(document, "mousemove", moveCalculator, false);
    removeEvent(document, "mouseup", dropCalculator, false);


function init() 
    diffx = null;
    diffy = null;

    calculator = document.getElementById("calculator");

    //store top and left values of calculator
    calculator.style.top = getStyle(calculator, "top");
    calculator.style.left = getStyle(calculator, "left");
    calcButtonState = true;


window.onload = init;

CSS:

#calculator

position: absolute;
z-index: 1;
left: 37%;
top: 25%;
border: solid;
border-color: red;
background: black;
width: 25%;
height: 45%;

这只是相关的 CSS。

HTML:

<!DOCTYPE HTML>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="style.css">
        <script type="text/javascript" src="javascript.js"></script>
    </head>

<body>

    <div id="main">

        <!--Calculator-->
        <div id="calculator">
        </div>
        <!--End calculator-->

        <header>

            <div id="title">
                Conversion Formulas
            </div>

        </header>

        <nav>
        </nav>

        <div id="content">

            <div id="dryMeasureContent">
            </div>

            <div id="wetMeasureContent">
            </div>

            <div id="distanceContent">
            </div>

            <div id="temperatureContent">
            </div>

        </div>

        <footer>
        </footer>

    </div>

</body>
</html>

请注意,我的其他 HTML 标记已经到位,但是,*** 似乎不能很好地处理 HTML,因此它们不会出现。

【问题讨论】:

我总是要求人们把他们的 JS/HTML/CSS 放在jsfiddle.net 这里是小提琴链接:jsfiddle.net/TnCfY 【参考方案1】:

首先,您的 init() 函数没有添加任何事件侦听器 - 这就是问题所在

尝试在此行之后添加addEvent(calculator, 'mousedown', moveCalculator);

calculator = document.getElementById("calculator");

希望你能理解我的想法

【讨论】:

成功!哇,我太傻了。 XD 计算器现在可以拖动并且可以更换。但是,它现在似乎在拖动时会跳离光标。 我其实改成addEvent(calculator, 'mousedown', grabCalculator); 很高兴能帮到你) 关于从光标跳转 - 在页面上的 div 中打印实时坐标,并尝试捕捉坐标发生大量变化的时刻,还可以考虑 scrollLeft/scrollTop 和其他坐标更正 这与我在grabCalculator() 和moveCalculator() 中的代码有关。我发现将它从grabCalculator()中的“+ mousex and + mousey”更改为“/ mousex and / mousey”。它工作得更好。然而,仍然不完美。【参考方案2】:

你看过 jquery library draggable http://jqueryui.com/draggable/ 和 droppable http://jqueryui.com/droppable/ 吗?

我使用这些库取得了巨大的成功。

超级超级容易实现。

【讨论】:

不幸的是,我对这个问题的解决方案必须更加“从头开始”,而不是使用我可以使用的库。 :// 真是个无赖的人:P【参考方案3】:

W3Schools 有一个很棒的关于使用 HTML5 和 javascript 拖放的教程。

<!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>
</head>
<body>
  <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

   <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)"  >

</body>
</html>

【讨论】:

以上是关于JavaScript 在网页上拖放一个 Div [重复]的主要内容,如果未能解决你的问题,请参考以下文章

Android 在屏幕上拖放图像?

在 FabricJS 画布上拖放和删除对象

如何在散点图上拖放

如何在 OSX 上拖放期间检测 META 按键

在画布上拖放形状

创建一个可以在 React 上拖放列和行的表