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

    建立函数: CREATE OR REPLACE FUNCTION enumtest(anyenum) RETURNS text AS $$ ::text; $$ LANGUAGE SQL; 建立enu ...

  2. 理解C++ static

    1.为什么设计static?考虑下面的需求: 在程序运行过程中,在一个范围内,有一个对象大家共享,而且可以多次使用,状态能够保持,对象的生命周期一直持续到程序运行结束. 2.静态对象要分配在全局数据区 ...

  3. 【React Native 实战】旋转图片验证码

    1.前言蘑菇街用打乱方向的图片作为验证码,既起到了验证码的作用又宣传了图片,今天我们就用React Native来实现这样的功能. 2.属性 Image标签属性resizeMode enum('cov ...

  4. OpenRisc-67-OR的汇编

    引言 之前我们写过OR的裸机程序,写过基于OR的linux设备驱动程序,也反汇编过OR的机器码. 本小节,我们将通过一个简单的实验,对OR的汇编(指令集)做一个简单的梳理和測试. 1,基本思想 要想了 ...

  5. 大一C语言结课设计之《学生信息管理系统》

    第一次写这么长的程序,代码仅供參考,有问题请留言. /* ** 学生信息管理系统 ** IDE:Dev-Cpp 4.9.9.2 ** 2014-6-15 */ #include <stdio.h ...

  6. IOS实用功能之截图（来自相册和拍照）

    // //  ViewController.m //  MyImagePicker1.0 // //  Created by Mac on 14-7-14. //  Copyright (c) 201 ...

  7. BootStrap2学习日记14----导航

    <div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inne ...

  8. eclipse[downloads]

    下载J2EE:http://www.eclipse.org/downloads/ 下载WPT插件:http://download.eclipse.org/webtools/updates 下载TOMC ...

  9. 1.7.2 Velocity Search UI

    1. Velocity Search UI solr包含了一个简单的搜索UI界面,是基于VelocityResponseWrite(也被叫做 Solritas)的.这里演示了几个有用的功能,如搜索,分 ...

  10. [Java] SSH框架笔记_Struts2配置问题

    1.Unable to load bean: type: class:com.opensymphony.xwork2.ObjectFactory - bean - jar:file:/D:/Progr ...