移动端拖拽

var move=document.getElementsByClassName("page1_2")[0];
    var startX=0;
    var startY=0;
    var x=0;
    var y=0;
    var off = 0;

    move.addEventListener("touchstart", function (e) {
        var e = e || event;
        off=1;
        startX = this.offsetLeft;
        startY = this.offsetTop;
        x=e.touches[0].pageX-startX;
        y=e.touches[0].pageY-startY;

    });

    document.addEventListener("touchmove", function (e) {
        var e = e || event;
        if (!off)return;
        var x1=e.touches[0].pageX-x;
        var y1=e.touches[0].pageY-y;
        if(x1<0){
            x1=0
        }
        if(y1<0){
            y1=0
        }
        if(x1>window.innerWidth-move.offsetWidth){
            x1=window.innerWidth-move.offsetWidth
        }
        if(y1>window.innerHeight-move.offsetHeight){
            y1=window.innerHeight-move.offsetHeight
        }
        move.style.left=x1+‘px‘;
        move.style.top=y1+"px";
});

        document.addEventListener(‘touchend‘, function (e) {
            off = 0;
        });
时间: 2024-12-27 01:39:36

移动端拖拽的相关文章

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

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

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 lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width,initial-scale=1.0" name="viewport"/> <title>论坛列表</title> <link href="

关于移动端拖拽

移动端碰撞检测 function drag(obj1,obj2,success){ obj1.addEventListener("touchstart", function(e) { var touches = e.touches[0]; window.disX= touches.clientX - obj1.offsetLeft; window.disX= touches.clientY - obj1.offsetTop; //阻止页面的滑动默认事件 document.addEven

jQuery拖拽

PC 端拖拽 function drag() { var _move = false; var _x, _y; $(".drag").click(function() { console.log($(".drag>g").css("display")); }).mousedown(function(e) { _move = true; _x = e.pageX - parseInt($(".drag").css(&quo

移动端关于拖拽事件

探究一下移动端的拖拽!因为html5出来了一个drag么!然后就兴致勃勃的去试了试,结果发现drag在pc端使用好使,但是在移动端不好用,然后在网上查了一下,有关于各个浏览器对drag的支持状况,在此附上链接一枚(想具体了解可以看看): http://caniuse.com/#search=Drag 没办法就就开始想别的办法,结果发现好多人用touch事件,所以便试了试,效果还算不错,自己写的就不上代码了,就把参考的一片文章附上供大家参考参考: -------------------------

移动端的拖拽这个demo实现的功能

SQL数据库适合那些需求确定和对数据完整性要去严格的项目.NoSQL数据库适用于那些对速度和可扩展性比较看重的那些不相关的,不确定和不断发展的需求. 总所周知,网页的加载速度跟图片是有很大的关系的,因为在不影响图片质量的情况下,减小图片的大小显得尤为重要. 这个demo实现的功能是:可以拖拽的元素(在这里是图片)位于列表中,这些元素可以被拖到指定区域,到达指定区域(控制台)后,元素被插入控制台后,原来的拖动元素返回原位置,新的元素依然可以在控制台中拖动,也能拖出控制台. 由于网页支付基于JS-S

移动端可拖拽效果

<!doctype html>移动端可拖拽效果 拖拽效果测试,PC浏览器访问,需打开控制台进入移动模式. 拖我 原文地址:https://www.cnblogs.com/webfby/p/11105370.html