jquery拖拽插件（div拖拽缩放jquery插件编写——带8个控制点）

本文目录

• div拖拽缩放jquery插件编写——带8个控制点
• jquery 移动端手指拖拽div四个边框，可上下左右随意拉伸调节div大小
• jquery 如何让控件移动，在html 里有text 文本框，现在想通过jquery ui 的drag 实现让文本框可拖拽移动
• jquery拖拽交换位置
• jquery表格插件哪个
• jQuery如何实现多个div窗口任意拖动

div拖拽缩放jquery插件编写——带8个控制点

拖拽以及缩放需要有一个范围，姑且管这个叫舞台（stage）。另外，在舞台范围内，如何以一种简单的方式定义拖拽项？可以通过给div增加一个拖拽class（例如：resize-item），拖拽项应该是absolute布局，舞台是relative/absolute布局 所以拖拽类需要有如下两个参数 控制面板初始化的时候，应该是隐藏的，只有点击对应的拖拽项的时候才出现，并且点击舞台空白部分，需要隐藏控制面板（组织事件冒泡） 如果这篇文章对你有用，不妨点个赞 查看源码

jquery 移动端手指拖拽div四个边框，可上下左右随意拉伸调节div大小

jQuery拖拽通过八个点改变div大小js:(function($) {/*** 默认参数*/var defaultOpts = {stage: document, //舞台item: ’resize-item’, //可缩放的类名};/*** 定义类*/var ZResize = function(options) {this.options = $.extend({}, defaultOpts, options);this.init();}ZResize.prototype = {init: function() {this.initResizeBox();},/*** 初始化拖拽item*/initResizeBox: function() {var self = this;$(self.options.item).each(function () {//创建面板var width = $(this).width();var height = $(this).height();var resizePanel = $(’《div class"resize-panel"》《/div》’);resizePanel.css({width: width,height: height,top: 0,left: 0,position: ’absolute’,’background-color’: ’rgba(0,0,0,0.5)’,cursor: ’move’,display: ’none’});self.appendHandler(resizePanel, $(this));/*** 创建控制点*/var n = $(’《div class="n"》《/div》’);//北var s = $(’《div class="s"》《/div》’);//南var w = $(’《div class="w"》《/div》’);//西var e = $(’《div class="e"》《/div》’);//东var ne = $(’《div class="ne"》《/div》’);//东北var nw = $(’《div class="nw"》《/div》’);//西北var se = $(’《div class="se"》《/div》’);//东南var sw = $(’《div class="sw"》《/div》’);//西南//添加公共样式self.addHandlerCss();//添加各自样式n.css({’top’: ’-4px’,’margin-left’: ’-4px’,’left’: ’50%’,’cursor’: ’n-resize’});s.css({’bottom’: ’-4px’,’margin-left’: ’-4px’,’left’: ’50%’,’cursor’: ’s-resize’});e.css({’top’: ’50%’,’margin-top’: ’-4px’,’right’: ’-4px’,’cursor’: ’e-resize’});w.css({’top’: ’50%’,’margin-top’: ’-4px’,’left’: ’-4px’,’cursor’: ’w-resize’});ne.css({’top’: ’-4px’,’right’: ’-4px’,’cursor’: ’ne-resize’});nw.css({top: ’-4px’,’left’: ’-4px’,’cursor’: ’nw-resize’});se.css({’bottom’: ’-4px’,’right’: ’-4px’,’cursor’: ’se-resize’});sw.css({’bottom’: ’-4px’,’left’: ’-4px’,’cursor’: ’sw-resize’});// 添加项目self.appendHandler(, resizePanel);//绑定拖拽缩放事件self.bindResizeEvent(resizePanel, $(this));//绑定触发事件self.bindTrigger($(this));});self.bindHidePanel();},//控制点公共样式addHandlerCss: function(els) {for(var i = 0; i 《 els.length; i++) {el = els;el.css({position: ’absolute’,width: ’8px’,height: ’8px’,background: ’#ff6600’,margin: ’0’,’border-radius’: ’2px’,border: ’1px solid #dd5500’,});}},/*** 插入容器*/appendHandler: function(handlers, target) {for(var i = 0; i 《 handlers.length; i++) {el = handlers;target.append(el);}},/*** 显示拖拽面板*/triggerResize: function(el) {var self = this;el.siblings(self.options.item).children(’div’).css({display: ’none’});el.children(’div’).css({display: ’block’});},/*** 拖拽事件控制 包含8个缩放点 和一个拖拽位置*/bindResizeEvent: function(el) {var self = this;var ox = 0; //原始事件x位置var oy = 0; //原始事件y位置var ow = 0; //原始宽度var oh = 0; //原始高度var oleft = 0; //原始元素位置var otop = 0;var org = el.parent(’div’);//东var emove = false;el.on(’mousedown’,’.e’, function(e) {ox = e.pageX;//原始x位置ow = el.width();emove = true;});//南var smove = false;el.on(’mousedown’,’.s’, function(e) {oy = e.pageY;//原始x位置oh = el.height();smove = true;});//西var wmove = false;el.on(’mousedown’,’.w’, function(e) {ox = e.pageX;//原始x位置ow = el.width();wmove = true;oleft = parseInt(org.css(’left’).replace(’px’, ’’));});//北var nmove = false;el.on(’mousedown’,’.n’, function(e) {oy = e.pageY;//原始x位置oh = el.height();nmove = true;otop = parseInt(org.css(’top’).replace(’px’, ’’));});//东北var nemove = false;el.on(’mousedown’,’.ne’, function(e) {ox = e.pageX;//原始x位置oy = e.pageY;ow = el.width();oh = el.height();nemove = true;otop = parseInt(org.css(’top’).replace(’px’, ’’));});//西北var nwmove = false;el.on(’mousedown’,’.nw’, function(e) {ox = e.pageX;//原始x位置oy = e.pageY;ow = el.width();oh = el.height();otop = parseInt(org.css(’top’).replace(’px’, ’’));oleft = parseInt(org.css(’left’).replace(’px’, ’’));nwmove = true;});//东南var semove = false;el.on(’mousedown’,’.se’, function(e) {ox = e.pageX;//原始x位置oy = e.pageY;ow = el.width();oh = el.height();semove = true;});//西南var swmove = false;el.on(’mousedown’,’.sw’, function(e) {ox = e.pageX;//原始x位置oy = e.pageY;ow = el.width();oh = el.height();swmove = true;oleft = parseInt(org.css(’left’).replace(’px’, ’’));});//拖拽var drag = false;el.on(’mousedown’, function(e) {ox = e.pageX;//原始x位置oy = e.pageY;otop = parseInt(org.css(’top’).replace(’px’, ’’));oleft = parseInt(org.css(’left’).replace(’px’, ’’));drag = true;});$(self.options.stage).on(’mousemove’, function(e) {if(emove) {var x = (e.pageX - ox);el.css({width: ow + x});org.css({width: ow + x});} else if(smove) {var y = (e.pageY - oy);el.css({height: oh + y});org.css({height: oh + y});} else if(wmove) {var x = (e.pageX - ox);el.css({width: ow - x,// left: oleft + x});org.css({width: ow - x,left: oleft + x});} else if(nmove) {var y = (e.pageY - oy);el.css({height: oh - y,// top: otop + y});org.css({height: oh - y,top: otop + y});} else if(nemove) {var x = e.pageX - ox;var y = e.pageY - oy;el.css({height: oh - y,// top: otop + y,width: ow + x});org.css({height: oh - y,top: otop + y,width: ow + x});} else if(nwmove) {var x = e.pageX - ox;var y = e.pageY - oy;el.css({height: oh - y,// top: otop + y,width: ow - x,// left: oleft + x});org.css({height: oh - y,top: otop + y,width: ow - x,left: oleft + x});} else if(semove) {var x = e.pageX - ox;var y = e.pageY - oy;el.css({width: ow + x,height: oh + y});org.css({width: ow + x,height: oh + y});} else if(swmove) {var x = e.pageX - ox;var y = e.pageY - oy;el.css({width: ow - x,// left: oleft + x,height: oh + y});org.css({width: ow - x,left: oleft + x,height: oh + y});} else if(drag) {var x = e.pageX - ox;var y = e.pageY - oy;org.css({left: oleft + x,top: otop + y});}}).on(’mouseup’, function(e) {emove = false;smove = false;wmove = false;nmove = false;nemove = false;nwmove = false;swmove = false;semove = false;drag = false;});},/*** 点击item显示拖拽面板*/bindTrigger: function(el) {var self = this;el.on(’click’, function(e) {e.stopPropagation();self.triggerResize(el);});},/*** 点击舞台空闲区域 隐藏缩放面板*/bindHidePanel: function(el) {var stage = this.options.stage;var item = this.options.item;$(stage).bind(’click’, function() {$(item).children(’div’).css({display: ’none’});})}}window.ZResize = ZResize;})(jQuery); html:《!doctype html》 《html》《head》《meta charset="utf-8"》《title》jQuery拖拽放大缩小插件idrag《/title》***隐藏网址***《style type="text/css"》.item1 {width: 405px;height: 291px;cursor: move;position: absolute;top: 30px;left: 30px;background-color: #FFF;border: 1px solid #CCCCCC;-webkit-box-shadow: 10px 10px 25px #ccc;-moz-box-shadow: 10px 10px 25px #ccc;box-shadow: 10px 10px 25px #ccc;}.item2 {width: 200px;height: 100px;cursor: move;position: absolute;top: 400px;left: 100px;background-color: #FFF;border: 1px solid #CCCCCC;-webkit-box-shadow: 10px 10px 25px #ccc;-moz-box-shadow: 10px 10px 25px #ccc;box-shadow: 10px 10px 25px #ccc;line-height: 100px;text-align: center;}body {background-color: #F3F3F3;}《/style》 《/head》《body》《div id="mydiv" style="width:800px; height:800px; border-style:solid"》《div id="div1" class="resize-item item1"》《img src="images/dog.png" width="100%" height="100%"》《/div》《div class="resize-item item2"》你是我的小小狗《/div》《/div》《script src="jquery.min.js"》《/script》《script type="text/javascript" src=’jquery.ZResize.js’》《/script》《script type="text/javascript"》new ZResize({stage: "#mydiv", //舞台item: ’#div1’, //可缩放的类名});《/script》 《/body》《/html》

jquery 如何让控件移动，在html 里有text 文本框，现在想通过jquery ui 的drag 实现让文本框可拖拽移动

(function($){ //拖拽插件,参数:id或object $.Move = function(_this){ if(typeof(_this)==’object’){ _this=_this; }else{ _this=$("#"+_this); } if(!_this){return false;}_this.css({’position’:’absolute’}).hover(function(){$(this).css("cursor","move");},function(){$(this).css("cursor","default");}) _this.mousedown(function(e){ var offset = $(this).offset(); var x = e.pageX - offset.left; var y = e.pageY - offset.top; _this.css({’opacity’:’0.3’}); $(document).bind("mousemove",function(ev){ _this.bind(’selectstart’,function(){return false;}); var _x = ev.pageX - x;//获得X轴方向移动的值 var _y = ev.pageY - y;//获得Y轴方向移动的值 _this.css({’left’:_x+"px",’top’:_y+"px"}); }); });$(document).mouseup(function(){ $(this).unbind("mousemove"); _this.css({’opacity’:’’}); }) };})(jQuery)把这个保存为xxx.js文件，引入到页面，调用：$(function(){ $.Move(’myId’);//参数可以是元素id，也可以是jQuery对象})

jquery拖拽交换位置

举例如下：《!-- 引入jQuery --》《script src="../../scripts/jquery.js" type="text/JavaScript"》《/script》《script type="text/javascript"》//《!》《/script》《/head》《body》《p title="选择你最喜欢的水果." 》你最喜欢的水果是?《/p》《ul》《li title=’苹果’》苹果《/li》《li title=’橘子’》橘子《/li》《li title=’菠萝’》菠萝《/li》《/ul》

jquery表格插件哪个

大多数前端er都把网页中的table标签替换为div，主要就是因为div要比table更容易添加CSS样式。但是我们在日常应用中仍然要用到table表格，其中最好的例子就是对照表。今天彬Go将向大家推荐15个jQuery表格插件让你对数据表格进行显示、排序、筛选和操控。如jQuery表格排序插件、jQuery表格拖拽插件、jQuery树形表格插件、设置颜色、点击、替换等效果。 1.DataTables-强大的jQuery表格插件datatables-jquery-插件DataTables是提供了大量特性的强大jQuery表格插件。例如:你可以自动轻松筛选、Ajax预读取数据、分页、列排序、高亮排序列、扩展插件支持、使用CSS或jQuery UI ThemeRoller 定制主题和完整文档。2.uiTableFilter-jQuery表格过滤插件ui-table-filter-jquery-插件uiTableFilter是一个用于表格行筛选的jQuery插件。插件作者提供了详细的例子来告诉大家如何将自己的表格和插件整合在一起并完成表格筛选。3.Scrollable HTML Table-jQuery表格滚动插件scrollable-html-table-jqueryScrollable HTML Table jQuery插件可以让你的表格变得可以滚动控制。买空间、服务器就上主机网（CNIDC.COM） 虚拟主机评测+IDC导航=IDC123.COM。4.Tablesorter-jQuery表格排序插件tablesorter-jquery-插件Tablesorter这个jQuery插件是用来将一个包含thead和tbody标签的标准HTML表格转变为无页面刷新的可排序表格。它不但支持多列排序，而且跨浏览器兼容并且能通过widget系统进行扩展。5.Flexigrid-Web2.0 jQuery表格插件flexigrid-jqueryFlexigrid 是一个轻量级的Web2.0 jQuery插件。它包含很多非常Cool的特性，如主题定制、分页、工具栏、搜索、排序、ajax读取数据源、调整列宽高尺寸等。6.HeatColor-jQuery表格颜色插件heatcolor-jqueryHeatColor可以让你根据元素的值来为元素设置颜色。 它的值的比对时根据预设的一个范围来进行比较，最后对他们自动进行颜色值的设置。买空间、服务器就上主机网（CNIDC.COM） 虚拟主机评测+IDC导航=IDC123.COM。7.JQTreeTable-jQuery树形表格插件jqtreetable-jquery使用JQTreeTable插件你可以得到一个树形表格，如果用户的浏览器禁用了JavaScript，那么他们也能看到普通形式的表格，并不影响可访问性。8.Ingrid-jQuery表格插件ingrid-jquery-表格-插件Ingrid是另一个数据表jQuery插件。它也有很多特性，比如列调整尺寸、排序、行列添加样式等。在作者网站提供了很棒的文档来告诉大家如何从头使用这个jQuery表格插件。 9.jQuery ColumnManager pluginjquery-column-manager-jquery-表格插件columnManager是可以控制任意表格列显示或隐藏的jQuery插件，而且它可以保存当前表格的状态至你下次访问。这个jQuery插件非常小巧轻量，仅3.6kb。 买空间、服务器就上主机网（CNIDC.COM） 虚拟主机评测+IDC导航=IDC123.COM。 10.jQuery treeTable-jQuery树形表格插件jquery-treetable-树形表格插件jQuery treeTable是小型的JQTreeTable, 它也能让你的table显示成树形结构. 这个插件也可以在浏览器禁用JavaScript时保持文档整洁并让原始table可以使用.11.CSV2Table-CSV格式读取表格插件csv2table-jQuery表格插件CSV2Table 可以读取CSV文件，它从CSV文件中读取内容并创建成table表格.12.Table Pagination-jQuery表格分页插件table-pagination-jQuery表格插件这个jQuery表格分页插件可以在表格下面创建分页元素，你还可以通过各种设置来定制分页。 买空间、服务器就上主机网（CNIDC.COM） 虚拟主机评测+IDC导航=IDC123.COM。13.jQuery TableRowCheckboxToggle jquery-table-插件这个jQuery表格插件可以让你再点击表格行的时候改变多选框状态并修改该行CSS样式。14.Table Drag and Drop jQuery plugin-jQuery表格拖拽插件这个简单的jQuery插件可以让用户使用拖拽行的方式重新排列表格各行，任意单独行可以设置为不可拖拽和/或不可放置。 15.uiTableEdituiTableEdit是由Greg Weber制作的很酷的jQuery表格插件，它允许用户表格内容。

jQuery如何实现多个div窗口任意拖动

jquery实现拖拽很简单的：

$(element).myDrag({        parent:’parent’, //定义拖动不能超出的外框,拖动范围        randomPosition:true, //初始化随机位置        direction:’all’, //方向        handler:false, //把手        dragStart:function(x,y){}, //拖动开始 x,y为当前坐标        dragEnd:function(x,y){}, //拖动停止 x,y为当前坐标        dragMove:function(x,y){} //拖动进行中 x,y为当前坐标    });

具体的可以看这里：jquery.drag.js—实现拖拽效果的插件

有完整的在线实例演示的！！！