html5移动端拖拽

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width,initial-scale=1.0" name="viewport"/>
<title>论坛列表</title>
<link href="css/Style.css" rel="stylesheet" />
</head>
<body style="background:#f8f8f8;">
<div class="p-bbs-list">
<ul>
<li>
<div class="p-bbs-list-left"><img src="img/bbs-list1.png"></div>
<div class="p-bbs-list-right">
<p><a href="kk_luntanNR.html">XXX产品4月上线你关注了嘛?</a></p>
<div class="bbs-bm">
<div class="bbs-li-bm">
<img src="img/bbs-st.png"><span>Stvetn</span>
<img src="img/bbs-xiaoxi.png"><span>20</span>
</div>
<div class="bbs-li-bm2">
<img src="img/bbs-time.png"><span>2016-3-29</span>
</div>
</div>
</div>
</li>
<li>
<div class="p-bbs-list-left"><img src="img/bbs-list2.png"></div>
<div class="p-bbs-list-right">
<p><a href="kk_luntanNR.html">XXX产品4月上线你关注了嘛?</a></p>
<div class="bbs-bm">
<div class="bbs-li-bm">
<img src="img/bbs-st.png"><span>Stvetn</span>
<img src="img/bbs-xiaoxi.png"><span>20</span>
</div>
<div class="bbs-li-bm2">
<img src="img/bbs-time.png"><span>2016-3-29</span>
</div>
</div>
</div>
</li>
<li>
<div class="p-bbs-list-left"><img src="img/bbs-list3.png"></div>
<div class="p-bbs-list-right">
<p><a href="kk_luntanNR.html">XXX产品4月上线你关注了嘛?</a></p>
<div class="bbs-bm">
<div class="bbs-li-bm">
<img src="img/bbs-st.png"><span>Stvetn</span>
<img src="img/bbs-xiaoxi.png"><span>20</span>
</div>
<div class="bbs-li-bm2">
<img src="img/bbs-time.png"><span>2016-3-29</span>
</div>
</div>
</div>
</li>
<li>
<div class="p-bbs-list-left"><img src="img/bbs-list4.png"></div>
<div class="p-bbs-list-right">
<p><a href="kk_luntanNR.html">XXX产品4月上线你关注了嘛?</a></p>
<div class="bbs-bm">
<div class="bbs-li-bm">
<img src="img/bbs-st.png"><span>Stvetn</span>
<img src="img/bbs-xiaoxi.png"><span>20</span>
</div>
<div class="bbs-li-bm2">
<img src="img/bbs-time.png"><span>2016-3-29</span>
</div>
</div>
</div>
</li>
<li>
<div class="p-bbs-list-left"><img src="img/bbs-list4.png"></div>
<div class="p-bbs-list-right">
<p><a href="kk_luntanNR.html">XXX产品4月上线你关注了嘛?</a></p>
<div class="bbs-bm">
<div class="bbs-li-bm">
<img src="img/bbs-st.png"><span>Stvetn</span>
<img src="img/bbs-xiaoxi.png"><span>20</span>
</div>
<div class="bbs-li-bm2">
<img src="img/bbs-time.png"><span>2016-3-29</span>
</div>
</div>
</div>
</li>
<li>
<div class="p-bbs-list-left"><img src="img/bbs-list4.png"></div>
<div class="p-bbs-list-right">
<p><a href="kk_luntanNR.html">XXX产品4月上线你关注了嘛?</a></p>
<div class="bbs-bm">
<div class="bbs-li-bm">
<img src="img/bbs-st.png"><span>Stvetn</span>
<img src="img/bbs-xiaoxi.png"><span>20</span>
</div>
<div class="bbs-li-bm2">
<img src="img/bbs-time.png"><span>2016-3-29</span>
</div>
</div>
</div>
</li>
<li>
<div class="p-bbs-list-left"><img src="img/bbs-list4.png"></div>
<div class="p-bbs-list-right">
<p><a href="kk_luntanNR.html">XXX产品4月上线你关注了嘛?</a></p>
<div class="bbs-bm">
<div class="bbs-li-bm">
<img src="img/bbs-st.png"><span>Stvetn</span>
<img src="img/bbs-xiaoxi.png"><span>20</span>
</div>
<div class="bbs-li-bm2">
<img src="img/bbs-time.png"><span>2016-3-29</span>
</div>
</div>
</div>
</li>
</ul>
<div class="bbs_sign" id="bbsSi" draggable="true"><img src="img/bi.png">我要发帖</div>
</div>
<script type="text/javascript">
var bbsSi=document.getElementById("bbsSi");
//监听
bbsSi.addEventListener(‘touchmove‘,function(event){
//阻止默认
event.preventDefault();
//判断是否是一个手指
if(event.targetTouches.length==1)
{
//拖拽最后的位置
var touch = event.targetTouches[0];
bbsSi.style.right = 0;
bbsSi.style.top = touch.pageY + ‘px‘;    }
},false);
</script>
</body>
</html>
时间: 2024-12-08 13:07:59

html5移动端拖拽的相关文章

HTML5多图片拖拽上传带进度条

前言 昨天利用css2的clip属性实现了网页进度条觉得还不错,但是很多情况下,我们在那些时候用进度条呢,一般网页加载的时候如果有需要可以用,那么问题就来了,怎么才算整个加载完毕呢,是页面主要模块加载完毕,还是window.onload之后算呢,对这些方面,我真不敢随意回答,因业务需求而定,本文想要说的是在图片上传的时候用到的进度条. 效果展示 详细参考请移步至html5demo HTML5 新增的拖拽相关事件说明 1.ondragover 效果图演示是所看见的可以将文件不仅仅是图片拖拽到该di

HTML5 File API — 拖拽显示

1.HTML5拖拽 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 如果是html中的元素,要进行拖动,需要设置draggable为true. 下面的代码显示了img在两个div里任意拖动. 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <style type="text/css"> 5 #div1, #div2 6 {float:left; width:100px; height:35px;

移动端拖拽(模块化开发,触摸事件,webpack)

通过jquery可以很容易实现CP端的拖拽.但是在移动端却不好用了.于是我自己写了一个在移动端的拖拽demo,主要用到的事件是触摸事件(touchstart,touchmove和touchend). 这个demo实现的功能是:可以拖拽的元素(在这里是图片)位于列表中,这些元素可以被拖到指定区域,到达指定区域(控制台)后,元素被插入控制台后,原来的拖动元素返回原位置,新的元素依然可以在控制台中拖动,也能拖出控制台. 在这个demo中一个用三个模块,分别为ajax模块,drag模块,position

HTML5 drag &amp; drop 拖拽与拖放简介

近来简单看了看有关HTML5拖拽有关内容,现在将整理的知识写下来: 一.相关重点 DataTransfer 对象:退拽对象用来传递的媒介,使用一般为Event.dataTransfer. draggable 属性:就是标签元素要设置draggable=true,否则不会有效果,例如: <div title="拖拽我" draggable="true">列表1</div> ondragstart 事件:当拖拽元素开始被拖拽的时候触发的事件,此事

分享html5的一个拖拽手法

就是这样的效果:拖拽之前 之后: 上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title> html5 drag and drop</title> <style> *[draggable=true] { -moz-user-select:none; -khtml-user-drag: e

pc端移动端拖拽实现

#div1 { width: 100px; height: 100px; background: red; position: absolute; } html <div id="div1"> </div> js 1 window.onload = function () { 2 var oDiv = document.getElementById('div1'); 3 //pc端 4 oDiv.onmousedown = function (ev) { 5 v

pc端拖拽事件

<html><head> <meta charset="utf-8"/> <title></title> <style type="text/css"> #box{ width: 208px; height: 208px; background: url(girl.gif) no-repeat; position: absolute; } </style></head>&

HTML5——将图片拖拽上传

如下图所示: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #div1{width:200px;height:200px;background:red;} </style> <script type="te

HTML5 drag &amp; drop 拖拽与拖放

关键词: 1. draggable:规定元素是否可拖动的,draggable=true可拖动 2. dataTransfer:拖拽对象用来传递的媒介,使用方式:event.dataTransfer 3. ondragstart:拖拽元素被拖拽时触发的事件,作用于被拖拽元素 4. ondragenter:拖拽元素进入目标元素时触发的事件,作用于目标元素 5. ondragover:拖拽元素在目标元素移动触发的事件,作用于目标元素 6. ondrop:拖拽的元素在目标元素上同时鼠标放开触发的事件,作