详细介绍html5之拖放的示例代码

1)创建来源项目

  1.1)draggable属性的值：

      true——此元素能被拖动；

      false——此元素不能被拖动；

      auto——浏览器可以自主决定某个元素是否能被拖动；

立即学习“前端免费学习笔记（深入）”；

  1.2）被拖动元素的属性：

      dragstart——在元素开始被拖动时触发；

      drag——在元素被拖动时反复触发；

      drag属性——在拖动操作完成时触发；

2）创建释放区

   2.1）释放区事件：

        dragenter——当被拖动元素进入释放区所占据的屏幕空间时触发；

        dragover——当被拖动元素在释放区内触发时移动触发；

        dragleave——当被拖动元素没有放入就离开释放区时触发；

        drop——当被拖动元素在释放区放下时触发；

nbsp;HTML>                                #src > * {float:left;}            #src > img {border: thin solid black; padding: 2px; margin:4px;}            #target {border: thin solid black; margin:4px;}            #target { height: 81px; width: 81px; text-align: center; display: table;}            #target > p {display: table-cell; vertical-align: middle;}            img.dragged {background-color: lightgrey;}                        
            @@##@@            @@##@@            @@##@@            
                
Drop Here
                                                                    var src = document.getElementById("src");            var target = document.getElementById("target");            var msg = document.getElementById("msg");                      var draggedID;                      target.ondragenter = handleDrag;            target.ondragover = handleDrag;                        function handleDrag(e) {                e.preventDefault();            }                        target.ondrop = function(e) {                var newElem = document.getElementById(draggedID).cloneNode(false);                target.innerHTML = "";                target.appendChild(newElem);                e.preventDefault();            }                      src.ondragstart = function(e) {                draggedID = e.target.id;                e.target.classList.add("dragged");            }                        src.ondragend = function(e) {                var elems = document.querySelectorAll(".dragged");                for (var i = 0; i < elems.length; i++) {                    elems[i].classList.remove("dragged");                }            }                      

登录后复制

3)使用DataTransfer属性

  3.1)与拖放操作所触发的事件同时派发的对象是DragEvent，它派生于MouseEvent。

  DragEvent对象定义的额外属性：

  dataTransfer——返回用于传输数据到释放区的对象（DataTransfer）；

  3.2)DataTransfer对象定义的属性：

  types——返回数据的格式；

  getData(         var target = document.getElementById(“target”); var httpRequest; var fileList; document.getElementById(“submit”).onclick = handleButtonPress; target.ondragenter = handleDrag; target.ondragover = handleDrag; function handleDrag(e) { e.preventDefault(); } target.ondrop = function(e) { fileList = e.dataTransfer.files; e.preventDefault(); } function handleButtonPress(e) { e.preventDefault(); var form = document.getElementById(“fruitform”); var formData = new FormData(form); if (fileList || true) { for (var i = 0; i < fileList.length; i++) { formData.append("file" + i, fileList[i]); } } httpRequest = new XMLHttpRequest(); httpRequest.onreadystatechange = handleResponse; httpRequest.open("POST", form.action); httpRequest.send(formData); } function handleResponse() { if (httpRequest.readyState == 4 && httpRequest.status == 200) { var data = JSON.parse(httpRequest.responseText); document.getElementById("results").innerHTML = "You ordered " + data.total + " items"; } }     

以上就是详细介绍html5之拖放的示例代码的详细内容，更多请关注【创想鸟】其它相关文章！