»
AnglaisFran�aisVietnamien

Imprimer - Dragable et Dropable Object par className - JavaScriptBank.com

Version compl�te: jsB@nk » Snippet » Dragable et Dropable Object par className
URL: https://www.javascriptbank.com/dragable-and-dropable-object-by-classname.html

Dragable et Dropable Object par className © JavaScriptBank.comCe script utilise className de faire glisser et déposer des objets en fonction de dragable div, dragable couche. Très facile à utiliser et à personnaliser.

Version compl�te: jsB@nk » Snippet » Dragable et Dropable Object par className
URL: https://www.javascriptbank.com/dragable-and-dropable-object-by-classname.html



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


JavaScript
<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>


HTML
<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>