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>
//
Javascript之拖拽库的更多相关文章
- CSS之拖拽库2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...
- JavaScript实现拖拽元素对齐到网格（每次移动固定距离）
这几天在做一个拖拽元素的附加功能,就是对齐到网格,实际上就是确定好元素的初始位置,然后拖拽元素时,每次移动固定的距离.让元素都可以在网格内对齐.先上效果图,然后在详细说明一下细节问题 做了一个gif图 ...
- 开源自己写的一个拖拽库，兼容到IE8+
github地址:https://github.com/qiangzi7723/draggable 目前这个库的兼容做到了兼容IE8,所以如果需要兼容IE8的朋友不妨试试.库里面写了很多的注释,对于想 ...
- javascript鼠标拖拽的那些事情
<html> <head> <title>javascript鼠标拖拽的那些事情</title> <meta http-equiv="C ...
- JavaScript动画-拖拽改变元素大小
▓▓▓▓▓▓ 大致介绍 拖拽改变元素大小是在模拟拖拽上增加了一些功能 效果:拖拽改变元素大小 ▓▓▓▓▓▓ 拖拽改变元素大小原理 首先这个方块得知道我们想要改变这个它的大小,所以我给它设定一个范围,当 ...
- Javascript自由拖拽类
基本拖拽配置 new Dragdrop({target 拖拽元素 HTMLElemnt 必选bridge 指定鼠标按下哪个元素时开始拖拽,实现模态对话框时用到 dragable 是否可拖拽 (true ...
- javascript完美拖拽的实现
直接上代码: HTML代码: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta chars ...
- Hammer.js 实现移动端元素的拖拽库
1. Pan事件:在指定的dom区域内,一个手指放下并移动事件,即触屏中的拖动事件.这个事件在屏触开发中比较常用,如:左拖动.右拖动等,如手要上使用QQ时向右滑动出现功能菜单的效果.该事件还可以分别对 ...
- day50—JavaScript鼠标拖拽事件
转行学开发,代码100天——2018-05-05 今天通过鼠标拖拽事件复习巩固一下鼠标事件. 鼠标拖拽事件需要记住两点: 1.距离不变 2.鼠标事件(按下,移动,抬起) <div id=&quo ...
随机推荐
- 哈希表(Hash)的应用
$hs=@() #定义数组 $hs=@{} #定义Hash表,使用哈希表的键可以直接访问对应的值,如 $hs["王五"] 或者 $hs.王五 的值为 75 $hs=@''@ #定义 ...
- Owin管道与asp.net管道模型
------2016.3.6 更新 文中提到没有Microsoft.Owin.Host.SystemWeb 这个dll 便不会加载Startup.Configuration,因为这个dll 其中有个O ...
- Codeforces Round #312 (Div. 2)B. Amr and The Large Array 暴力
B. Amr and The Large Array Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contes ...
- 几种Java写webservice的比较
Java6,Axis2.XFire.CXF 1.JWS是Java语言对WebService服务的一种实现,用来开发和发布服务.而从服务本身的角度来看JWS服务是没有语言界限的.但是Java语言为Jav ...
- 关于Web端即JS端编程
主要的技术是 HTML/JS/CSS/XML Web就是JS/DOM编程. 页面的数据来源: XML, JSON, HTML, Text, 第三方页面或者数据. 不一定都要跟服务器进行交互. JS端 ...
- iOS开发——项目实战OC篇&类QQ黏性按钮（封装）
类QQ粘性按钮(封装) 那个,先来说说原理吧: 这里原理就是,在界面设置两个控件一个按钮在上面,一个View在下面(同样大小),当我们拖动按钮的时候显示下面的View,view不移动,但是会根据按钮中 ...
- 分布式存储系统sheepdog
Sheepdog,是由NTT的3名日本研究员开发的开源项目,主要用来为虚拟机提供块设备. 其架构例如以下: 以下,我们将从架构.模块等几个方面来介绍下: 一.架构图 如上图: 採用无中心节点的全对称架 ...
- cocos2d-x游戏是怎么跑起来的
虽然cocos2d-x v3.0 alpha版已经出来了,也改进了不少,有兴趣的可以去尝尝鲜.因为后面可能还会配合cocoStudio写一下博客,而现在v1.0.0.0版本需要配合cocos2d-x ...
- 《linux性能及调优指南》
http://blog.chinaunix.net/uid-26000296-id-4065871.html
- XCODE4.6从零开始添加视图
转自:http://www.cnblogs.com/luoxs/archive/2012/09/23/2698995.html 对于很多初学者来说,肯定希望自己尝试不用傻瓜的“Single View ...