在手机上运行触屏拖动时，我发现页面并没有反应，服务器端执行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>

//

Javascript之拖拽库的更多相关文章

  1. CSS之拖拽库2

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...

  2. JavaScript实现拖拽元素对齐到网格（每次移动固定距离）

    这几天在做一个拖拽元素的附加功能,就是对齐到网格,实际上就是确定好元素的初始位置,然后拖拽元素时,每次移动固定的距离.让元素都可以在网格内对齐.先上效果图,然后在详细说明一下细节问题 做了一个gif图 ...

  3. 开源自己写的一个拖拽库，兼容到IE8+

    github地址:https://github.com/qiangzi7723/draggable 目前这个库的兼容做到了兼容IE8,所以如果需要兼容IE8的朋友不妨试试.库里面写了很多的注释,对于想 ...

  4. javascript鼠标拖拽的那些事情

    <html> <head> <title>javascript鼠标拖拽的那些事情</title> <meta http-equiv="C ...

  5. JavaScript动画-拖拽改变元素大小

    ▓▓▓▓▓▓ 大致介绍 拖拽改变元素大小是在模拟拖拽上增加了一些功能 效果:拖拽改变元素大小 ▓▓▓▓▓▓ 拖拽改变元素大小原理 首先这个方块得知道我们想要改变这个它的大小,所以我给它设定一个范围,当 ...

  6. Javascript自由拖拽类

    基本拖拽配置 new Dragdrop({target 拖拽元素 HTMLElemnt 必选bridge 指定鼠标按下哪个元素时开始拖拽,实现模态对话框时用到 dragable 是否可拖拽 (true ...

  7. javascript完美拖拽的实现

    直接上代码: HTML代码: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta chars ...

  8. Hammer.js 实现移动端元素的拖拽库

    1. Pan事件:在指定的dom区域内,一个手指放下并移动事件,即触屏中的拖动事件.这个事件在屏触开发中比较常用,如:左拖动.右拖动等,如手要上使用QQ时向右滑动出现功能菜单的效果.该事件还可以分别对 ...

  9. day50—JavaScript鼠标拖拽事件

    转行学开发,代码100天——2018-05-05 今天通过鼠标拖拽事件复习巩固一下鼠标事件. 鼠标拖拽事件需要记住两点: 1.距离不变 2.鼠标事件(按下,移动,抬起) <div id=&quo ...

随机推荐

  1. SCCM2012分发脚本

    1.分发批处理脚本 命令行:script.bat 2.分发PowerShell脚本 命令行:PowerShell.exe -executionpolicy unrestricted -file .\s ...

  2. python flask model 序列化

    class DictSerializable(object):     def as_dict(self,*args):         result = OrderedDict()         ...

  3. Codeforces Gym 100531G Grave 水题

    Problem G. Grave 题目连接: http://codeforces.com/gym/100531/attachments Description Gerard develops a Ha ...

  4. C#窗体钉在桌面、置底、嵌入桌面的办法

    想做一个桌面时钟,钉在桌面上不影响正常使用,只在看桌面的时候显示. 从网上多方寻找找到这么个代码,但是还是有不方便的地方,大家探讨一下. 这个程序在使用“显示桌面”的时候还可以显示,将程序的Form1 ...

  5. 在C#中使用全局鼠标、键盘Hook

    今天,有个同事问我,怎样在C#中使用全局钩子?以前写的全局钩子都是用unmanaged C或C++写个DLL来实现,可大家都知道,C#是基于.Net Framework的,是managed,怎么实现全 ...

  6. 在android market发布个人免费应用的步骤

    写了一段时间的android应用了,只是在自己手机上面安装. 上周申请了android developer,需要一次性25美元的程序开发注册费用.费用需要用google checkout,所以还要先申 ...

  7. mysqldump 使用 --set-gtid-purged

    1.导出时指定字符集,报错Character set 'utf-8' is not a compiled character set and is not specifie .--default-ch ...

  8. Feister network

    在密码学中,Feister network(又叫Feister Function, 一下简称 F函数)是一种用在块加密上的对称结构,很多种块加密算法都是使用这种结构. 优点: 1.加解密的过程非常相似 ...

  9. 构建高性能服务（三）Java高性能缓冲设计 vs Disruptor vs LinkedBlockingQueue--转载

    原文地址:http://maoyidao.iteye.com/blog/1663193 一个仅仅部署在4台服务器上的服务,每秒向Database写入数据超过100万行数据,每分钟产生超过1G的数据.而 ...

  10. Boost.Any

    支持类型安全地存储和获取任意类型的值 #include <list> #include <boost/any.hpp> #include <string> #inc ...