Cet article décrit la méthode de JavaScript pour implémenter les effets de glisser-déposer de texte et d'image. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
Copiez le code comme suit: <html>
<adal>
<Title> JavaScript se rend compte de l'effet de glisser-déposer du texte et des images </Title>
<style type = "text / css">
* {rembourrage: 0; marge: 0;}
.Tips {position: absolu; arrière-plan: #eee;}
</ style>
</ head>
<body>
<div id = "TIPS1" onMouseOver = "dragf.drag ('TIPS1');">
<img src = "/ images / skinslogo.gif"> <br> L'image peut être glissée </div>
<div id = "TIPS2" onMouseOver = "dragf.drag ('TIPS2');"> <a href = "// www.vevb.com" Target = "_ Blank"> wulin.com </a> <br /> Les liens de drag sont également OK
</div>
</docy>
<script type = "text / javascript">
var $ id = fonction (id) {return document.getElementById (id);}
var dragf = {
Verrouillé: faux,
lastobj: indéfini,
glisser: fonction (obj) {
$ id (obj) .onmousedown = fonction (e) {
var e = e? e: window.event;
if (! window.event) {e.PreventDefault ();} / * Empêchez l'événement par défaut de A, IMG dans l'annotation <a href = '/ site / js-5791-1.html' cible = '_ Blank'> <u> glisser a, img sous le navigateur </u> </a> * / / / / / / / ultime
dragf.locked = true;
$ id (obj) .style.position = "absolu";
$ id (obj) .style.zindex = "100";
if (dragf.lastoBj && dragf.lastoBj! = $ id (obj)) {/ * La traînée multi-éléments nécessite la restauration de l'état du dernier élément * /
dragf.lastoBj.style.zindex = "1";
}
dragf.lastoBj = $ id (obj);
var tempx = $ id (obj) .offsetLeft;
var tempy = $ id (obj) .offsetTop;
dragf.x = e.clientx;
dragf.y = e.clienty;
document.onmousemove = fonction (e) {
var e = e? e: window.event;
if (dragf.locked == false) return false;
$ id (obj) .style.left = tempx + e.clientx-dragf.x + "px";
$ id (obj) .style.top = TEMPY + E.Clienty-dragf.y + "px";
if (window.event) {e.reTurnValue = false;} / * bloquez l'événement par défaut d'un, img sous IE * /
}
document.onmouseup = function () {
dragf.locked = false;
}
}
}
}
</cript>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.