Implémentation de la fonction de copie glisser-déposer HTML5-Tutoriel H5-php.cn

Implémentation de la fonction de copie glisser-déposer HTML5

高洛峰

Libérer： 2017-02-17 17:11:19

original

2276 Les gens l'ont consulté

Le glisser-déposer est une fonctionnalité courante, qui consiste à saisir un objet et à le faire glisser vers un autre emplacement. En HTML5, le glisser fait partie du standard et n'importe quel élément peut être déplacé. Le glisser-déposer HTML5 est une fonction très courante, mais la plupart des cas de glisser-déposer sont un processus de découpe. Le projet doit implémenter la fonction de copie glisser-déposer HTML5. La copie glisser-déposer HTML5 est très simple. faites glisser et déposez. Effectuez simplement quelques petites modifications en cours de route.

ps : Cet article de blog n'est pas un article de page d'accueil, juste une simple note.

Prise en charge du navigateur

Internet Explorer 9
Firefox
Opera 12
Chrome
Safari 5

partie de code v1.0

<!DOCTYPE html>
<html>
<head>
  <styletype="text/css">
    #p1 {
      width: 700px;
      height: 120px;
      padding: 10px;
      border: 1px solid #aaaaaa;
    }
 
    #drag1 {
      cursor:pointer;
    }
  </style>
  <scripttype="text/javascript">
    function allowDrop(ev) {
      ev.preventDefault();
    }
 
    function drag(ev) {
 
      ev.dataTransfer.setData("Text", ev.target.id);
    }
 
    function drop(ev) {
      ev.preventDefault();
      var data = ev.dataTransfer.getData("Text");
      var item = document.getElementById(data).cloneNode();
      ev.target.appendChild(item);
    }
  </script>
</head>
<body>
  <p>请把 Windows Azure 的图片拖放到矩形中：</p>
  <pid="p1" ondrop="drop(event)" ondragover="allowDrop(event)"></p>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <imgid="drag1" src="http://www.cnblogs.com/images/cnblogs_com/toutou/699740/t_Azure.png" draggable="true" ondragstart="drag(event)"/>
</body>
</html>

Copier après la connexion

Analyse du code

L'idée d'implémentation est de cloner l'élément glissé, puis d'appendChild() l'élément cloné à l'emplacement spécifié

Le code de base pour implémenter la copie par glisser-déposer HTML5.cloneNode()

Une fois la copie par glisser-déposer HTML5 terminée, de nombreuses choses peuvent en fait être complétées après l'exécution de appendChild(). besoins spécifiques

Si vous souhaitez simplement implémenter le glisser-déposer HTML5 traditionnel, supprimez var item = document.getElementById(data).cloneNode();, puis ev.target.appendChild(data); >

passez cet article, j'espère qu'il aidera tout le monde, merci pour votre soutien à ce site !

Pour plus d'articles liés à l'implémentation de la fonction de copie par glisser-déposer HTML5, veuillez faire attention au site Web PHP chinois !