码迷,mamicode.com
首页 > Web开发 > 详细

js拖动效果 touchstart mousedown

时间:2015-11-30 17:59:21      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:

<script src="extras/jquery.min.1.7.js"></script>
<div class="game" id="game" style="position: absolute;top: 0;left: 0">
    <div>dsafsdf</div>
</div>
<script>
    isTouch = ‘ontouchstart‘ in window
    var mouseEvents = (isTouch) ?
    {
        down: ‘touchstart‘,
        move: ‘touchmove‘,
        up: ‘touchend‘,
        over: ‘touchstart‘,
        out: ‘touchend‘
    }
            :
    {
        down: ‘mousedown‘,
        move: ‘mousemove‘,
        up: ‘mouseup‘,
        over: ‘mouseover‘,
        out: ‘mouseout‘
    }
    var eventHandlers={
        touchStart:function(){

        }
    }
    var down=null
      document.getElementById("game").addEventListener(mouseEvents.down,function(e, opts, corner){
          down=this
            console.log(this)

      },false)
    document.addEventListener(mouseEvents.move,function(e, opts, corner){
        if(down){
            e=e.changedTouches? e.changedTouches[0]:e
            $(down).css({"left":e.pageX,"top": e.pageY})
            console.log(e)
        }


    },false)
    document.addEventListener(mouseEvents.up,function(e, opts, corner){
        down=null

    },false)
    document.addEventListener(mouseEvents.over,function(e, opts, corner){


    },false)
//    $(this).bind(mouseEvents.down, data.eventHandlers.touchStart).
//            bind(‘end‘, turnMethods._eventEnd).
//            bind(‘pressed‘, turnMethods._eventPressed).
//            bind(‘released‘, turnMethods._eventReleased).
//            bind(‘flip‘, turnMethods._flip);
//
//    $(this).parent().bind(‘start‘, data.eventHandlers.start);
//
//    $(document).bind(mouseEvents.move, data.eventHandlers.touchMove).
//            bind(mouseEvents.up, data.eventHandlers.touchEnd);
</script>

  

js拖动效果 touchstart mousedown

标签:

原文地址:http://www.cnblogs.com/caoke/p/5007496.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!