JavaScript在網頁上拖/放一個Div

我正在嘗試編寫一些允許我在網頁上移動div的JavaScript。也就是說，我想讓它可以點擊並從頁面上的一個位置拖動一個div到另一個位置。我的JavaScript似乎沒有合作。但是，我覺得我正在犯一個非常簡單的錯誤。也許另一雙眼睛可以找到我的問題？JavaScript在網頁上拖/放一個Div

任何意見表示讚賞。

下面是我的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非常好，這樣它們就不會出現。

來源

2013-04-02 Lethal Left Eye

我總是問人們把他們的JS/HTML/CSS放在小提琴上http://jsfiddle.net/ – Jazzepi

這裏是小提琴鏈接： http://jsfiddle.net/TnCfY/ –

首先，你init()功能不添加任何的事件監聽器 - 這是問題

嘗試這一行後添加addEvent(calculator, 'mousedown', moveCalculator);

calculator = document.getElementById("calculator");

我希望你明白我的想法

來源

2013-04-02 22:31:13 dimaninc

成功！哇，我太愚蠢了。 XD 計算器現在拖動並且可以被替換。但是，它現在似乎在拖動時跳離光標。 –

我實際上已將其更改爲addEvent（計算器，'mousedown'，grabCalculator）; –

我很高興我幫你） – dimaninc

你看了看jQuery庫可拖拽http://jqueryui.com/draggable/和droppable http://jqueryui.com/droppable/？

我已經使用這些庫取得了巨大的成功。

超超級容易實現。

來源

2013-04-02 22:26:23

不幸的是，我對這個問題的解決方案必須比從頭開始更加「從頭開始」。：/ –

男人是一個無賴：P –

-1

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)" width="336" height="69"> 

</body> 
</html>

來源

2013-04-02 22:31:03

JavaScript在網頁上拖/放一個Div

回答

相關問題