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

    限制如下: http://slony.info/documentation/limitations.html Slony-I does not automatically replicate •Cha ...

  2. Java组待开发的任务

    周枫: A.将digital,xylinkWeb修改为支持oracle版,并完成测试工作.准备好实施安装的步骤和每步需要的文件,比如发布的项目,tomcat,jdk,memcached,数据库等,在单 ...

  3. 【转】Python字符编码详解

    转自:http://www.cnblogs.com/huxi/archive/2010/12/05/1897271.html 1. 字符编码简介 1.1. ASCII ASCII(American S ...

  4. 【PAT】1029. Median (25)

    Given an increasing sequence S of N integers, the median is the number at the middle position. For e ...

  5. 将表中数据生成SQL语句

    在开发过程中,经常需要我们对表中的数据进行转移,如果在同台机器,可以使用SQL自带的导入数据,但是如果想让所有的数据生成可执行的SQL语句,它的移植性最强了.首先要设计一个存储过程.具体如下: CRE ...

  6. HTML WEB 和HTML Agility Pack结合

    现在,在不少应用场合中都希望做到数据抓取,特别是基于网页部分的抓取.其实网页抓取的过程实际上是通过编程的方法,去抓取不同网站网页后,再进行分析筛选的过程.比如,有的比较购物网站,会同时去抓取不同购物网 ...

  7. [Angular 2] Style Angular 2 Components

    Each Angular 2 Component can have its own styles which will remained contained inside the component. ...

  8. Ambari源代码分析之总览

    一.基本概念: Resource:Ambari把能够被管理的资源的抽象为一个Resource实例,资源能够包括服务.组件.主机节点等,一个resource实例中包括了一系列该资源的属性: Proper ...

  9. ubuntu搭建LAMP服务器

    新手记录下...... 安装apache apt-get install apache2 安装mysql apt-get install mysql-server 安装php apt-get inst ...

  10. js数组的管理[增,删,改,查]

    今天在设计表单的时候遇到对数组的一些处理的问题,比如说怎么创建一个数组,然后牵扯到数组的增删改查的方法.请看API FF: Firefox, N: Netscape, IE: Internet Exp ...