文章参考自： 链接
创新互联为客户提供专业的成都网站设计、成都网站制作、程序、域名、空间一条龙服务，提供基于WEB的系统开发. 服务项目涵盖了网页设计、网站程序开发、WEB系统开发、微信二次开发、移动网站建设等网站方面业务。
需要jq币，鉴于经常逛jQuery插件库，花了30大洋买了100jq币，发现开发还是挺费钱的，，，哈哈
搞定
此插件直接使用可能不是很适合具体业务需求，可以根据自身需要修改slide-unlock.css样式文件，比如说将#slider中的margin: 100px auto;改成margin: 10px auto;这样margin值减小为10px，可能更适合
一、引入文件：
复制代码代码如下:
script src="/js/jquery-1.8.0.min.js" type="text/javascript"/script
script src="/js/store.js" type="text/javascript"/script
script src="/js/jquery.resizableColumns.js" type="text/javascript"/script
二、TABLE
复制代码代码如下:
table id="myTable" border="1"
thead
tr
th data-resizable-column-id="a"input type="checkbox" //th
th data-resizable-column-id="b"栏目类型 /th
th data-resizable-column-id="c"活动名称 /th
th data-resizable-column-id="d"状态 /th
th data-resizable-column-id="e"操作选项/t
因为想实现相框的拖到，找了半天的原因愣是没有找到错误，所以，只能翻看源码了
如何实现拖动效果？
首先分析下拖动效果原理：
1.当鼠标在被拖动对象上按下鼠标（触发onmousedown事件，且鼠标在对象上方）
2.开始移动鼠标（触发onmousemove事件）
3.移动时更显对象的top和left值
4.鼠标放开停止拖动(触发onmouseup事件)
注意：拖动的对象必须是定位对象(即设置了position:absolute或
relative)。
也就是说拖动事件=onmousedown事件+onmousemove事件
整个过程就是处理这三个事件来模拟drag事件
现在看看我实现的源代码：
html代码：
div
class="drag"
p
class="title"标题(点击标题拖动)/p
/div
div
class="drag1"
p
class="title"标题/p
点击我移动
/div
jquery插件代码：
(function($){
$.fn.drag=function(options){
//默认配置
var
defaults
=
{
handler:false,
opacity:0.5
};
//
覆盖默认配置
var
opts
=
$.extend(defaults,
options);
this.each(function(){
//初始标记变量
var
isMove=false,
//handler如果没有设置任何值，则默认为移动对象本身，否则为所设置的handler值
handler=opts.handler?$(this).find(opts.handler):$(this),
_this=$(this),
//移动的对象
dx,dy;
$(document)
//移动鼠标，改变对象位置
.mousemove(function(event){
//
console.log(isMove);
if(isMove){
//获得鼠标移动后位置
var
eX=event.pageX,eY=event.pageY;
//更新对象坐标
_this.css({'left':eX-dx,'top':eY-dy});
}
})
//当放开鼠标，停止拖动
.mouseup(function(){
isMove=false;
_this.fadeTo('fast',
1);
//console.log(isMove);
});
handler
//当按下鼠标，设置标记变量isMouseDown为true
.mousedown(function(event){
//判断最后触发事件的对象是否是handler
if($(event.target).is(handler)){
isMove=true;
$(this).css('cursor','move');
//console.log(isMove);
_this.fadeTo('fast',
opts.opacity);
//鼠标相对于移动对象的坐标
dx=event.pageX-parseInt(_this.css("left"));
dy=event.pageY-parseInt(_this.css("top"));
}
});
});
};
})(jQuery);
调用方法：
$(function(){
//拖动标题
$(".drag").drag({
handler:$('.title'),//操作拖动的对象，此对象必须是移动对象的子元素
opacity:0.7
//设置拖动时透明度
});
//拖动主体对象
$(".drag1").drag({
opacity:0.7
});
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
//200多个插件如下 实际开发中 请选择合适的使用
1：文件上传类jQuery插件
Ajax File Upload.
jQUploader.
Multiple File Upload plugin.
jQuery File Style.
Styling an input type file.
Progress Bar Plugin.
2：表单验证类jQuery插件
jQuery Validation.
Auto Help.
Simple jQuery form validation.
jQuery XAV – form validations.
jQuery AlphaNumeric.
Masked Input.
TypeWatch Plugin.
Text limiter for form fields.
Ajax Username Check with jQuery.
3:表单选择框类jQuery插件
jQuery Combobox.
jQuery controlled dependent (or Cascadign) Select List.
Multiple Selects.
Select box manipulation.
Select Combo Plugin.
jQuery – LinkedSelect
Auto-populate multiple select boxes.
Choose Plugin (Select Replacement).
4:表单基本、输入框、选择框等jQuery插件
jQuery Form Plugin.
jQuery-Form.
jLook Nice Forms.
jNice.
Ping Plugin.
Toggle Form Text.
ToggleVal.
jQuery Field Plugin.
jQuery Form’n Field plugin.
jQuery Checkbox manipulation.
jTagging.
jQuery labelcheck.
Overlabel.
3 state radio buttons.
ShiftCheckbox jQuery Plugin.
Watermark Input.
jQuery Checkbox (checkboxes with imags).
jQuery SpinButton Control.
jQuery Ajax Form Builder.
jQuery Focus Fields.
jQuery Time Entry.
5:时间、日期和颜色选取类jQuery插件
jQuery UI Datepicker.
jQuery date picker plugin.
jQuery Time Picker.
Time Picker.
ClickPick.
TimePicker.
Farbtastic jQuery Color Picker Plugin.
Color Picker by intelliance.fr.
6:投票类jQuery插件
jQuery Star Rating Plugin.
jQuery Star Rater.
Content rater with asp.net, ajax and jQuery.
Half-Star Rating Plugin.
7:搜索类jQuery插件
jQuery Suggest.
jQuery Autocomplete.
jQuery Autocomplete Mod.
jQuery Autocomplete by AjaxDaddy.
jQuery Autocomplete Plugin with HTML formatting.
jQuery Autocompleter.
AutoCompleter (Tutorial with PHPMySQL).
quick Search jQuery Plugin.
8:jQuery编辑器插件
jTagEditor.
WYMeditor.
jQuery jFrame.
Jeditable – edit in place plugin for jQuery.
jQuery editable.
jQuery Disable Text Select Plugin.
Edit in Place with Ajax using jQuery.
jQuery Plugin – Another In-Place Editor.
TableEditor.
tEditable – in place table editing for jQuery.
9:多媒体、视频、Flash等类jQuery插件
jMedia – accessible multi-media embedding.
JBEdit – Ajax online Video Editor.
jQuery MP3 Plugin.
jQuery Media Plugin.
jQuery Flash Plugin.
Embed QuickTime.
SVG Integration.
图片类jQuery插件
ThickBox.
jQuery lightBox plugin.
jQuery Image Strip.
jQuery slideViewer.
jQuery jqGalScroll 2.0.
jQuery – jqGalViewII.
jQuery – jqGalViewIII.
jQuery Photo Slider.
jQuery Thumbs – easily create thumbnails.
jQuery jQIR Image Replacement.
jCarousel Lite.
jQPanView.
jCarousel.
Interface Imagebox.
Image Gallery using jQuery, Interface Reflactions.
simple jQuery Gallery.
jQuery Gallery Module.
EO Gallery.
jQuery ScrollShow.
jQuery Cycle Plugin.
jQuery Flickr.
jQuery Lazy Load Images Plugin.
Zoomi – Zoomable Thumbnails.
jQuery Crop – crop any image on the fly.
Image Reflection.
10:Google地图类jQuery插件应用
jQuery Plugin googlemaps.
jMaps jQuery Maps Framework.
jQmaps.
jQuery Google Maps.
jQuery Maps Interface forr Google and Yahoo maps.
jQuery J Maps – by Tane Piper.
11:游戏类jQuery插件
Tetris with jQuery.
jQuery Chess.
Mad Libs Word Game.
jQuery Puzzle.
jQuery Solar System (not a game but awesome jQuery Stuff).
12:表格,网格类jQuery插件
UI/Tablesorter.
jQuery ingrid.
jQuery Grid Plugin.
Table Filter – awesome!.
TableEditor.
jQuery Tree Tables.
Expandable “Detail” Table Rows.
Sortable Table ColdFusion Costum Tag with jQuery UI.
jQuery Bubble.
TableSorter.
Scrollable HTML Table.
jQuery column Manager Plugin.
jQuery tableHover Plugin.
jQuery columnHover Plugin.
jQuery Grid.
TableSorter plugin for jQuery.
tEditable – in place table editing for jQuery.
jQuery charToTable Plugin.
jQuery Grid Column Sizing.
jQuery Grid Row Sizing.
13:统计类jQuery插件
jQuery Wizard Plugin .
jQuery Chart Plugin.
Bar Chart.
14:边框、圆角、背景类jQuery插件
jQuery Corner.
jQuery Curvy Corner.
Nifty jQuery Corner.
Transparent Corners.
jQuery Corner Gallery.
Gradient Plugin.
14:文字和超链接类jQuery插件
jQuery Spoiler plugin.
Text Highlighting.
Disable Text Select Plugin.
jQuery Newsticker.
Auto line-height Plugin.
Textgrad – a text gradient plugin.
LinkLook – a link thumbnail preview.
pager jQuery Plugin.
shortKeys jQuery Plugin.
jQuery Biggerlink.
jQuery Ajax Link Checker.
15:文本提示类jQuery插件
jQuery Plugin – Tooltip.
jTip – The jQuery Tool Tip.
clueTip.
BetterTip.
Flash Tooltips using jQuery.
ToolTip.
16:菜单和导航类jQuery插件
jQuery Tabs Plugin – awesome! . [demo nested tabs.]
another jQuery nested Tab Set example (based on jQuery Tabs Plugin).
jQuery idTabs.
jdMenu – Hierarchical Menu Plugin for jQuery.
jQuery SuckerFish Style.
jQuery Plugin Treeview.
treeView Basic.
FastFind Menu.
Sliding Menu.
Lava Lamp jQuery Menu.
jQuery iconDock.
jVariations Control Panel.
ContextMenu plugin.
clickMenu.
CSS Dock Menu.
jQuery Pop-up Menu Tutorial.
Sliding Menu.
17:幻灯片、手风琴特效类jQuery插件
jQuery Plugin Accordion.
jQuery Accordion Plugin Horizontal Way.
haccordion – a simple horizontal accordion plugin for jQuery.
Horizontal Accordion by portalzine.de.
HoverAccordion.
Accordion Example from fmarcia.info.
jQuery Accordion Example.
jQuery Demo – Expandable Sidebar Menu.
Sliding Panels for jQuery.
jQuery ToggleElements.
Coda Slider.
jCarousel.
Accesible News Slider Plugin.
Showing and Hiding code Examples.
jQuery Easing Plugin.
jQuery Portlets.
AutoScroll.
Innerfade.
18:拖放类jQuery插件
UI/Draggables.
EasyDrag jQuery Plugin.
jQuery Portlets.
jqDnR – drag, drop resize.
Drag Demos.
19:XML XSL JSON Feeds相关jQuery插件
XSLT Plugin.
jQuery Ajax call and result XML parsing.
xmlObjectifier – Converts XML DOM to JSON.
jQuery XSL Transform.
jQuery Taconite – multiple Dom updates.
RSS/ATOM Feed Parser Plugin.
jQuery Google Feed Plugin.
20:浏览器
Wresize – IE Resize event Fix Plugin.
jQuery ifixpng.
jQuery pngFix.
Link Scrubber – removes the dotted line onfocus from links.
jQuery Perciformes – the entire suckerfish familly under one roof.
Background Iframe.
QinIE – for proper display of Q tags in IE.
jQuery Accessibility Plugin.
jQuery MouseWheel Plugin.
21:警告, 提示, 确认等对话框
jQuery Impromptu.
jQuery Confirm Plugin.
jqModal.
SimpleModal.
CSS
jQuery Style Switcher.
JSS – Javascript StyleSheets.
jQuery Rule – creation/manipulation of CSS Rules.
jPrintArea.
22:DOM、AJAX和其它JQuery插件
FlyDOM.
jQuery Dimenion Plugin.
jQuery Loggin.
Metadata – extract metadata from classes, attributes, elements.
Super-tiny Client-Side Include Javascript jQuery Plugin.
Undo Made Easy with Ajax.
JHeartbeat – periodically poll the server.
Lazy Load Plugin.
Live Query.
jQuery Timers.
jQuery Share it – display social bookmarking icons.
jQuery serverCookieJar.
jQuery autoSave.
jQuery Puffer.
jQuery iFrame Plugin.
Cookie Plugin for jQuery.
jQuery Spy – awesome plugin.
Effect Delay Trick.
jQuick – a quick tag creator for jQuery..