jquery 设置元素拖动效果

jquery 设置页面元素可拖动效果

使用：

setEleDrag('.go_manager_vote',120,60,function(){
console.log('执行点击操作');
});

// 页面元素可拖动
// ele       :  $('.class') 或 $('#id')
// _w        :  元素宽
// _h        :  元素高
// callback  :  点击执行的回调
function setEleDrag(ele,_w,_h,callback){// 点击if(callback){$(ele).on('click', function(e) {callback();});}var sT, sL, wW, wH;$(ele).on('touchstart', function(e) {// e.preventDefault();sT = parseFloat($(window).scrollTop());sL = parseFloat($(window).scrollLeft());wW = parseFloat($(window).width()) - _w;wH = parseFloat($(window).height()) - _h;});$(ele).on('touchmove', function(e) {e.preventDefault();var touch = e.originalEvent.targetTouches[0];var x = touch.pageX - _w/2 - sL;var y = touch.pageY - _h/2 - sT;// console.log(x , y);x = x < 0 ? 0 : (x > wW ? wW : x);y = y < 0 ? 0 : (y > wH ? wH : y);// console.log(x , y);var theThis = $(this);theThis.css({'position': 'fixed','left': x,'top': y});});$(ele).on('touchend', function(e) {// e.preventDefault();});
}

jquery 设置元素拖动效果相关推荐

用jQuery设置元素的css样式
什么是jQuery ,jQuery 是能用少量的代码写出JavaScript的效果. 学习jQuery 要有一定的JavaScript.CSS.HTML的基础: jQuery 库位于一个 JavaSc ...
使用 Sticky-Kit 实现基于 jQuery 的元素固定效果
元素固定效果在网页中应用得很多,比较常见的使用场景有改进导航,显示广告.Sticky-Kit 是一个非常方便的 jQuery 插件,简化了创建/管理粘元素,有复杂的使用功能.这些功能包括:处理多个固定 ...
js实现元素拖动效果
首先看一下演示效果,项目在线演示实现思路:将元素拖动分为三部分,鼠标按下,鼠标移动,鼠标弹起,分别监听三个事件.首先是定义四个变量startX,startY,sourceX,sourceY,分别代表 ...
jQuery 学习-样式篇（八）：jQuery 设置元素的 CSS 样式
推荐阅读 Helm3(K8S 资源对象管理工具)视频教程:https://edu.csdn.net/course/detail/32506 Helm3(K8S 资源对象管理工具)博客专栏:https: ...
linux 拖动图标有拖影_想要实现元素拖动效果，但是一拖动出现禁止的图标
用jQuery实现可用鼠标创建窗口,用鼠标对窗口进行拖动. https://jsfiddle.net/r4x1toz3/7/ 但是有两个问题不知道怎么解决: 1.创建完元素,,文字会呈被选中状态,每创 ...
jQuery 学习-样式篇（五）：jQuery 设置元素的 html 结构或 text 内容
推荐阅读 Helm3(K8S 资源对象管理工具)视频教程:https://edu.csdn.net/course/detail/32506 Helm3(K8S 资源对象管理工具)博客专栏:https: ...
disabled计算机语言,jquery设置元素的readonly和disabled详解
1.readonly $('input').attr("readonly","readonly")//将input元素设置为readonly $('input' ...
vue.draggable实现元素拖动效果
找了很久的使用文档使用文档,有实例还有代码演示有几个需要拖动的列表就用几个数组就要有几个配置选项. 但是现在控制台会报警告,应该是废弃了这种使用方法,但我没改出来,有会使用的可以在评论区指导一下吗 ...
jquery设置元素的显示、隐藏
1.show().hide() $("#id").show()表示为display:block; $("#id").hide()表示为display:none; ...

jquery 设置元素拖动效果

jquery 设置元素拖动效果相关推荐

最新文章

热门文章