使用javascript和css拖動

我想創建一個特定圖像可以拖動的網頁。使用javascript和css拖動

所以這是我的代碼。

<! doctype html> 

<html> 
<head> 
    <title> 

    </title> 
    <script src="13.8.js"></script> 
</head> 
<body> 
    <img src="file:\\C:\Users\X555\Pictures\poster\yellowflowers.png" id="image" alt="white lion"> 

    <script> 
     var mustDrag; 
     var image 


     function set() { 
      image = document.getElementById("image"); 
      image.addEventListener("mousedown", function() { mustDrag = true }, false); 
      window.addEventListener("mouseup", function() { mustDrag = false; }, false); 


      window.addEventListener("mousemove", drag, false); 
     } 

     function drag(e) { 

      if (mustDrag) { 
       e.target.style.position = 'absolute'; 
       e.target.style.left = Number(e.x); 
       e.target.style.top = Number(e.y); 
      } 

     } 
     window.addEventListener("load", set, false); 
    </script> 
</body> 
</html>

但它不能正常工作。有時它拖動白色它不應該。並且通常將圖像放在窗口的左下方，而不是。我根本沒有意識到這個代碼有什麼問題？

來源

2015-09-28 Masood Moghini

請參閱本例中，希望你能得到你的答案

\t function startDrag(e) { 
 
\t \t \t \t // determine event object 
 
\t \t \t \t if (!e) { 
 
\t \t \t \t \t var e = window.event; 
 
\t \t \t \t } 
 
       if(e.preventDefault) e.preventDefault(); 
 

 
\t \t \t \t // IE uses srcElement, others use target 
 
\t \t \t \t targ = e.target ? e.target : e.srcElement; 
 

 
\t \t \t \t if (targ.className != 'dragme') {return}; 
 
\t \t \t \t // calculate event X, Y coordinates 
 
\t \t \t \t \t offsetX = e.clientX; 
 
\t \t \t \t \t offsetY = e.clientY; 
 

 
\t \t \t \t // assign default values for top and left properties 
 
\t \t \t \t if(!targ.style.left) { targ.style.left='0px'}; 
 
\t \t \t \t if (!targ.style.top) { targ.style.top='0px'}; 
 

 
\t \t \t \t // calculate integer values for top and left 
 
\t \t \t \t // properties 
 
\t \t \t \t coordX = parseInt(targ.style.left); 
 
\t \t \t \t coordY = parseInt(targ.style.top); 
 
\t \t \t \t drag = true; 
 

 
\t \t \t \t // move div element 
 
\t \t \t \t \t document.onmousemove=dragDiv; 
 
       return false; 
 
\t \t \t \t 
 
\t \t \t } 
 
\t \t \t function dragDiv(e) { 
 
\t \t \t \t if (!drag) {return}; 
 
\t \t \t \t if (!e) { var e= window.event}; 
 
\t \t \t \t // var targ=e.target?e.target:e.srcElement; 
 
\t \t \t \t // move div element 
 
\t \t \t \t targ.style.left=coordX+e.clientX-offsetX+'px'; 
 
\t \t \t \t targ.style.top=coordY+e.clientY-offsetY+'px'; 
 
\t \t \t \t return false; 
 
\t \t \t } 
 
\t \t \t function stopDrag() { 
 
\t \t \t \t drag=false; 
 
\t \t \t } 
 
\t \t \t window.onload = function() { 
 
\t \t \t \t document.onmousedown = startDrag; 
 
\t \t \t \t document.onmouseup = stopDrag; 
 
\t \t \t }

.dragme{ 
 
\t \t \t position:relative; 
 
\t \t \t width: 270px; 
 
\t \t \t height: 203px; 
 
\t \t \t cursor: move; 
 
\t \t } 
 
\t #draggable { 
 
\t \t \t background-color: #ccc; 
 
\t \t \t border: 1px solid #000; 
 
\t \t }


 
<img src="https://lh4.googleusercontent.com/-8tqTFxi2ebU/Ufo4j_thf7I/AAAAAAAADFM/_ZBQctm9e8E/w270-h203-no/flower.jpg" alt="drag-and-drop image script" 
 
title="drag-and-drop image script" class="dragme"> 
 

 
<div id="draggable" class="dragme">Test </div>

來源

2015-09-28 08:39:53 Shrinath

我真的很感激Shrinath，我從很長的時間尋找這種類型的代碼，很多感謝它。 –

歡迎@om ..快樂編碼！ – Shrinath

感謝Shrinath，但還有兩個問題。 1-我不知道jQuery，所以我不知道offsetX是什麼。 2 - 那麼我的主要問題是「我的代碼出了什麼問題」。對我來說，每件事情都是正確的，但並非如此。代碼的錯誤在哪裏？ –

使用javascript和css拖動

回答

相關問題