Apprentissage approfondi des compétences de glisser-déposer javascript effect

Maison

interface Web

js tutoriel

Apprentissage approfondi des compétences de glisser-déposer javascript effect_javascript

May 16, 2016 pm 03:06 PM

javascript 拖拽

Cet article résume certains des effets étendus en faisant glisser pour votre référence. Le contenu spécifique est le suivant

1. Réalisez l'effet cadré lorsque vous faites glisser des images. Autrement dit, lorsque la souris fait glisser une image ou un objet, sa position d'origine conserve sa forme.

Cet effet est en fait très simple. Il consiste principalement à créer un autre objet avec la même largeur et la même hauteur que l'objet déplacé, puis à le transformer en objet déplacé.

Allez directement sur le code :

&lt;html
&lt;head&gt;
&lt;style&gt;
#div1 {width:100px; height:100px; background:yellow; position:absolute;}
.box{border: 1px solid black;position: absolute;}
&lt;/style&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;无标题文档&lt;/title&gt;
&lt;script&gt;
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;
    };
  };
};
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div id="div1"&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Copier après la connexion

2. Concernant l'effet de faire glisser la fenêtre pour zoomer et dézoomer, enveloppez simplement un autre div dans le div ci-dessus.

&lt;html
&lt;head&gt;
&lt;style&gt;
#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;}
&lt;/style&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;无标题文档&lt;/title&gt;
&lt;script&gt;
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;
    };
  };
};
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div id='div2'&gt;
   &lt;div id="div1"&gt;
   &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Copier après la connexion

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn