Javascript之拖拽库

在手机上运行触屏拖动时，我发现页面并没有反应，服务器端执行javascript在手机端与电脑端不能“相同式”实现（电脑端运行正常，而手机端不一样），这是为甚么呢？

首先，我们都知道javascript本身就是一门脚本语言，而脚本语言通常是用来调用接口和功能的（本身也具有高级语言的特性）。

正是由于这种特性，所以javascript在调用与传递数据时体现了高度的精密性。

不同手机的浏览器它们的UserAgent(简称UA，浏览器标识)也不相同，例如，有的手机支持WAP，而有的手机支持HTTP……

Web网页上也会出现同步和异步的情况，那么什么是同步和异步？

同步传输于字符，异步传输于比特，同步传输的时候要求接受端和发送端保持一致，而异步则不要求。

异步模式是一个巨大的进步，当你打开一个网页时，花费很多的时间等待服务器提供给用户的信息可能是很多用户不想要的，而在同步时代，这就是很大的浪费，当然，异步模式的产生也有其更为复杂的因素。

并且手机浏览器的兼容性也存在很多的不足：

不同浏览器标签默认的外部丁和内补丁不同。例如：

我们随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。

解决方法：CSS： *{margin:0;padding:0;}

备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。

<!DOCTYPE html> <head> <title>TODO supply a title</title> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> #box{width: 300px;height: 300px;border: 1px solid red;} #box li{list-style: none;font-size: 20px;line-height: 20px;background: #ccc; width: 100px;height: 20px;margin: 10px 0 auto;} #con{width: 300px;height: 300px;border: 1px solid #888;} #con li{list-style: none;font-size: 20px;line-height: 20px;background: #ccc; width: 100px;height: 20px;margin: 10px 0 auto;} </style> <script> window.onload = function () { var box = document.getElementById('box'); var con = document.getElementById('con'); var lis = document.getElementsByTagName('li'); for (var i = 0; i < lis.length; i++) { lis[i].draggable = true; lis[i].flag = false; lis[i].ondragstart = function () { this.flag = true; } lis[i].ondragend = function () { this.flag = false; } } // A.ondragenter：当拖拽对象进入投放区时触发； //B.ondragover：拖拽对象在投放区内移动时触发； //C.ondragleave：拖拽对象没有投放到投放区，离开投放区的时候触发； //D.ondrop：拖拽对象投放在投放区时触发。 box.ondragenter = function (e) { e.preventDefault(); } box.ondragover = function (e) { e.preventDefault(); } box.ondragleave = function (e) { e.preventDefault(); } box.ondrop = function (e) { for (var i = 0; i < lis.length; i++) { if (lis[i].flag) { box.appendChild(lis[i]); } } e.preventDefault(); } con.ondragenter = function (e) { e.preventDefault(); } con.ondragover = function (e) { e.preventDefault(); } con.ondragleave = function (e) { e.preventDefault(); } con.ondrop = function (e) { for (var i = 0; i < lis.length; i++) { if (lis[i].flag) { con.appendChild(lis[i]); } } e.preventDefault(); } if(null == undefined){alert('点击拖动并且可回拖');} } </script> </head> <body> <div id="main"> <div id="box"></div> <div id="con"> <li>A</li> <li>B</li> <li>C</li> <li>D</li> <li>E</li> <li>F</li> <li>G</li> <li>H</li> <li>i</li> </div> </div> </body>

posted @ 2016-06-17 17:05 冷的锋刃阅读(798) 评论(0) 编辑收藏举报

刷新页面返回顶部

冷的锋刃

用冷的锋刃琴的寂寥写往事今朝

Javascript之拖拽库

公告