不按规矩来了
先上代码吧
/* *author:kingflag *mailbox:[email protected] *2016-09-08 */ $(function() { /*移动端绑定事件*/ FastClick.attach(document.body); var actionList = { //测试 'test1': function(self) { test1(self) } } function setMove() { var element = $('#floatdiv'); var ty = 0; /* console.log($(window).height()); console.log($(window).width());这是获取可见范围的宽度个高度*/ element.on("touchmove", function(e) { e.preventDefault(); var offset = $(this).offset(); var divwidth=$('#floatdiv').width();//获取div宽度 var divheight=$('#floatdiv').height();//获取div高度 var x = (e.originalEvent.changedTouches[0].clientX - divwidth/2 );//拖拽div时使触摸点在div中间,下面的和这个一样,只是一个控制X轴,一个控制Y轴 var y = (e.originalEvent.changedTouches[0].clientY - divheight/2 ); ty = e.originalEvent.changedTouches[0].clientY; tl = e.originalEvent.changedTouches[0].clientY; if (offset.top <= $(window).height() - 53 || offset.left <= $(window).width() - offset.width) { element.css('top', y + 'px'); element.css('left', x + 'px'); } else { element.css('top', y + 'px'); element.css('left', x + 'px'); } e.stopPropagation(); return false; }); element.on('touchend', function(e) { //touchend是触摸后执行的动作,我没做太多调整,有可能拖拽的div移出屏幕可见范围,移动的主要功能是touchmove var offset = $(this).offset(); //touch是div超出可见范围后执行的动作,可以将div拉回可见范围 var h = ty + offset.height; var l = offset.left + offset.width; if (h > $(window).height()) { var th = $(window).height() - offset.height - 100; element.css('top', th + 'px'); } else if (offset.top < 0) { element.css('top', '50px'); } if (offset.left < 0) { element.css('left', '0px'); } else if (l > $(window).width()) { element.css('left', $(window).width() - offset.width + 'px'); } }); } setMove(); var $body = $(document) /*绑定click事件*/ $body.on('click', '[data-action]', function() { var actionName = $(this).data('action') var action = actionList[actionName] var self = this if ($.isFunction(action)) action(self) }) function test1(self) { console.log("测试"); } })