»

Tiếng AnhTiếng PhápTiếng Việt

In - Kéo thả các đối tượng dùng className - JavaScriptBank.com

Phiên bản đầy đủ: jsB@nk » Thủ thuật » Kéo thả các đối tượng dùng className
URL: https://www.javascriptbank.com/dragable-and-dropable-object-by-classname.html

Đoạn mã này sử dụng thuộc tính className để thêm chức năng kéo thả cho đối tượng.

Phiên bản đầy đủ: jsB@nk » Thủ thuật » Kéo thả các đối tượng dùng className
URL: https://www.javascriptbank.com/dragable-and-dropable-object-by-classname.html

<style type="text/css">.drag {  width: 200px;  height: 200px;  position: absolute;  border: 1px solid black;  background: silver}</style>

<script type="text/javascript" name="dragAndDrop.js">// Created by: Michael Burt :: http://mburt.funpic.orgvar ie = document.allvar ns = document.getElementById && !iefunction dragbyclass(e) {  var fobj = ns ? e.target : event.srcElement  if (fobj.tagName=="DIV" && fobj.className=="drag") {   var ev=e||event   var offsetx=ev.clientX-fobj.offsetLeft   var offsety=ev.clientY-fobj.offsetTop  document.onmousemove=function() {    fobj.style.left=ev.clientX-offsetx    fobj.style.top=ev.clientY-offsety    return false  }  fobj.onmouseup=function() {    document.onmousemove=null   }  }}document.onmousedown=dragbyclass;</script>

<div class="drag" style="left:40px;top:60px;z-index:100">Drag number ONE</div><div class="drag" style="left:40px;top:60px">Drag number TWO</div>