Heim > Artikel > Web-Frontend > js implementiert die Drag-and-Drop-Funktion

js implementiert die Drag-and-Drop-Funktion

高洛峰Original: 2017-03-01 15:48:061133Durchsuche

In diesem Artikel werden hauptsächlich Beispiele für die Implementierung von Drag-and-Drop-Effekten vorgestellt, die einen guten Referenzwert haben. Schauen wir uns das mit dem folgenden Editor an

Rendering: (Das rote Quadrat kann gezogen werden willkürlich )

Der Code lautet wie folgt:

 <meta charset="UTF-8">
 <meta name="Generator" content="EditPlus®">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 <title>Document</title>
 <style type="text/css">
 *{
 margin:0;
 padding:0;
 }
 body{
 background:url("img/2345_image_file_copy_1.jpg");
 }
 #d1{
 width:100px;
 height:100px;
 background:red;
 margin-left:300px;
 }
 </style>
 </head>
 <body>
 <p id="d1"></p>
 </body>
 <script>
 window.onload=function(){
 var d1=document.getElementById("d1");
 d1.onmousedown=function(e){
 var mouseX=e.clientX;
 var mouseY=e.clientY;//计算xy
 var pianyiX=mouseX-d1.offsetLeft;
 var pianyiY=mouseY-d1.offsetTop;
 document.onmousemove=function(e){
 var newX=e.clientX-pianyiX;
 var newY=e.clientY-pianyiY;
 d1.style.marginLeft=newX+"px";
 d1.style.marginTop=newY+"px";
 }
 };
 document.onmouseup = function(e){
 document.onmousemove = null ;
 };
 }
 /*
 结果，上面的onmousemove要写在document上,我写在p上导致错误
 */
 </script>
</html>

Mehr js zu Implementieren Sie die Drag-and-Drop-Funktion. Für verwandte Artikel beachten Sie bitte die chinesische PHP-Website!

Stellungnahme：

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

Vorheriger Artikel：Die Funktion „startsWith“ in js ist mit keinem Browser kompatibelNächster Artikel：Die Funktion „startsWith“ in js ist mit keinem Browser kompatibel

In Verbindung stehende Artikel

Mehr sehen