Heim > Artikel > Web-Frontend > Erweitertes Erlernen von Javascript-Drag-and-Drop-Effekt_Javascript-Fähigkeiten

Erweitertes Erlernen von Javascript-Drag-and-Drop-Effekt_Javascript-Fähigkeiten

WBOYOriginal: 2016-05-16 15:06:461780Durchsuche

In diesem Artikel werden einige der durch Ziehen erweiterten Effekte als Referenz zusammengefasst. Der spezifische Inhalt ist wie folgt:

1. Erkennen Sie den Rahmeneffekt beim Ziehen von Bildern. Das heißt, wenn die Maus ein Bild oder Objekt zieht, behält es seine ursprüngliche Position bei.

Dieser Effekt ist eigentlich sehr einfach. Er besteht hauptsächlich darin, ein anderes Objekt mit der gleichen Breite und Höhe wie das gezogene Objekt zu erstellen und es dann in das gezogene Objekt umzuwandeln.

Gehe direkt zum Code:

<html
<head>
<style>
#div1 {width:100px; height:100px; background:yellow; position:absolute;}
.box{border: 1px solid black;position: absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()//凡是被拖拽的物体，其必须定位为absolute
{
  var oDiv=document.getElementById('div1');
  oDiv.onmousedown=function (ev)
  {
    var oEvent=ev||event;
    var disX=oEvent.clientX-oDiv.offsetLeft;
    var disY=oEvent.clientY-oDiv.offsetTop;

    var oNewDiv=document.createElement('div');
    oNewDiv.className='box';
    oNewDiv.style.width=oDiv.offsetWidth-2+'px';//将2px的边框去掉
    oNewDiv.style.height=oDiv.offsetHeight-2+'px';
    
     oNewDiv.style.left=oDiv.offsetLeft+'px';
     oNewDiv.style.top=oDiv.offsetTop+'px';
    document.body.appendChild(oNewDiv);
    document.onmousemove=function (ev)
    {
      var oEvent=ev||event;
      oNewDiv.style.left=oEvent.clientX-disX+'px';
      oNewDiv.style.top=oEvent.clientY-disY+'px';
    };
    document.onmouseup=function ()
    {
      document.onmousemove=null;
      document.onmouseup=null;
      document.body.removeChild(oNewDiv);
      oDiv.style.left=oNewDiv.style.left;
      oDiv.style.top=oNewDiv.style.top;
    };
  };
};
</script>
</head>

<body>
<div id="div1">
</div>
</body>
</html>

2. Was den Effekt des Ziehens des Fensters zum Vergrößern und Verkleinern betrifft, schließen Sie einfach ein weiteres Div in das obige Div ein.

<html
<head>
<style>
#div1 {width:10px; height:10px; background:url(images/1.gif); position:absolute;bottom: 0;right: 0}//拖拉的物体，改为图片
#div2{width: 200px;height: 200px;position: relative;background: #ccc;}
.box{border: 1px solid black;position: absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()//凡是被拖拽的物体，其必须定位为absolute
{
  var oDiv=document.getElementById('div1');
   var oDiv2=document.getElementById('div2');
  oDiv.onmousedown=function (ev)
  {
    var oEvent=ev||event;
    var disX=oEvent.clientX-oDiv.offsetLeft;
    var disY=oEvent.clientY-oDiv.offsetTop;

    var oNewDiv=document.createElement('div');
    //oNewDiv.className='box';
    oNewDiv.style.width=oDiv.offsetWidth-2+'px';
    oNewDiv.style.height=oDiv.offsetHeight-2+'px';
    
     oNewDiv.style.left=oDiv.offsetLeft+'px';
     oNewDiv.style.top=oDiv.offsetTop+'px';
    document.body.appendChild(oNewDiv);
    document.onmousemove=function (ev)
    {
      var oEvent=ev||event;
      oDiv2.style.width=oEvent.clientX-disX+'px';//这里是它的父级
      oDiv2.style.height=oEvent.clientY-disY+'px';
    };
    document.onmouseup=function ()
    {
      document.onmousemove=null;
      document.onmouseup=null;
      document.body.removeChild(oNewDiv);
      oDiv.style.left=oDiv2.style.left;
      oDiv.style.top=oDiv2.style.top;
    };
  };
};
</script>
</head>

<body>
<div id='div2'>
   <div id="div1">
   </div>
</div>
</body>
</html>

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.

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：10 Tipps, um Node.js-Anwendungen schneller zu machen_node.jsNächster Artikel：10 Tipps, um Node.js-Anwendungen schneller zu machen_node.js

In Verbindung stehende Artikel

Mehr sehen