仿Google小工具jQuery拖动特效js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是仿Google小工具jQuery拖动特效js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>仿Google小工具制作拖动层的界面阻力jQuery特效</title>
        
        <link href="inettuts.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="columns">
        
        <ul id="column1" class="column">
            <li class="widget color-green" id="intro">
                <div class="widget-head">
                    <h3>Introduction Widget</h3>
                </div>
                <div class="widget-content">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>
                </div>
            </li>
            <li class="widget color-red">  
                <div class="widget-head">
                    <h3>Widget title</h3>
                </div>
                <div class="widget-content">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>
                </div>
            </li>
        </ul>

        <ul id="column2" class="column">
            <li class="widget color-blue">  
                <div class="widget-head">
                    <h3>Widget title</h3>
                </div>
                <div class="widget-content">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>
                </div>
            </li>
            <li class="widget color-yellow">  
                <div class="widget-head">
                    <h3>Widget title</h3>
                </div>
                <div class="widget-content">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>
                </div>
            </li>
        </ul>
        
        <ul id="column3" class="column">
            <li class="widget color-orange">  
                <div class="widget-head">
                    <h3>Widget title</h3>
                </div>
                <div class="widget-content">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>
                </div>
            </li>
            <li class="widget color-white">  
                <div class="widget-head">
                    <h3>Widget title</h3>
                </div>
                <div class="widget-content">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>
                </div>
            </li>
            
        </ul>
        
    </div>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="jquery-ui-personalized-1.6rc2.min.js"></script>
    <script type="text/javascript" src="inettuts.js"></script>
</body>
</html>

JS代码(inettuts.js):

/* * Script from NETTUTS.com [by James Padolsey] * @requires jQuery($),jQuery UI & sortable/draggable UI modules */
var iNettuts ={
	jQuery:$,settings:{
	columns:'.column',widgetSelector:'.widget',handleSelector:'.widget-head',contentSelector:'.widget-content',widgetDefault:{
	movable:true,removable:true,collapsible:true,editable:true,colorClasses:['color-yellow','color-red','color-blue','color-white','color-orange','color-green']}
,widgetIndividual:{
	intro:{
	movable:false,removable:false,collapsible:false,editable:false}
}
}
,init:function (){
	this.attachStylesheet('inettuts.js.css');
	this.addWidgetControls();
	this.makeSortable();
}
,getWidgetSettings:function (id){
	var $ = this.jQuery,settings = this.settings;
	return (id&&settings.widgetIndividual[id]) ? $.extend({
}
,settings.widgetDefault,settings.widgetIndividual[id]):settings.widgetDefault;
}
,addWidgetControls:function (){
	var iNettuts = this,$ = this.jQuery,settings = this.settings;
	$(settings.widgetSelector,$(settings.columns)).each(function (){
	var thisWidgetSettings = iNettuts.getWidgetSettings(this.id);
	if (thisWidgetSettings.removable){
	$('<a href="#" class="remove">CLOSE</a>').mousedown(function (e){
	e.stopPropagation();
}
).click(function (){
	if(confirm('This widget will be removed,ok?')){
	$(this).parents(settings.widgetSelector).animate({
	opacity:0}
,function (){
	$(this).wrap('<div/>').parent().slideUp(function (){
	$(this).remove();
}
);
}
);
}
return false;
}
).appendTo($(settings.handleSelector,this));
}
if (thisWidgetSettings.editable){
	$('<a href="#" class="edit">EDIT</a>').mousedown(function (e){
	e.stopPropagation();
}
).toggle(function (){
	$(this).css({
	backgroundPosition:'-66px 0',width:'55px'}
) .parents(settings.widgetSelector) .find('.edit-box').show().find('input').focus();
	return false;
}
,function (){
	$(this).css({
	backgroundPosition:'',width:''}
) .parents(settings.widgetSelector) .find('.edit-box').hide();
	return false;
}
).appendTo($(settings.handleSelector,this));
	$('<div class="edit-box" style="display:none;
	"/>') .append('<ul><li class="item"><label>Change the title?</label><input value="' + $('h3',this).text() + '"/></li>') .append((function(){
	var colorList = '<li class="item"><label>Available colors:</label><ul class="colors">';
	$(thisWidgetSettings.colorClasses).each(function (){
	colorList += '<li class="' + this + '"/>';
}
);
	return colorList + '</ul>';
}
)()) .append('</ul>') .insertAfter($(settings.handleSelector,this));
}
if (thisWidgetSettings.collapsible){
	$('<a href="#" class="collapse">COLLAPSE</a>').mousedown(function (e){
	e.stopPropagation();
}
).toggle(function (){
	$(this).css({
	backgroundPosition:'-38px 0'}
) .parents(settings.widgetSelector) .find(settings.contentSelector).hide();
	return false;
}
,function (){
	$(this).css({
	backgroundPosition:''}
) .parents(settings.widgetSelector) .find(settings.contentSelector).show();
	return false;
}
).prependTo($(settings.handleSelector,this));
}
}
);
	$('.edit-box').each(function (){
	$('input',this).keyup(function (){
	$(this).parents(settings.widgetSelector).find('h3').text( $(this).val().length>20 ? $(this).val().substr(0,20)+'...':$(this).val() );
}
);
	$('ul.colors li',this).click(function (){
	var colorStylePattern = /\bcolor-[\w]{
	1,}
\b/,thisWidgetColorClass = $(this).parents(settings.widgetSelector).attr('class').match(colorStylePattern) if (thisWidgetColorClass){
	$(this).parents(settings.widgetSelector) .removeClass(thisWidgetColorClass[0]) .addClass($(this).attr('class').match(colorStylePattern)[0]);
}
return false;
}
);
}
);
}
,attachStylesheet:function (href){
	var $ = this.jQuery;
	return $('<link href="' + href + '" rel="stylesheet" type="text/css" />').appendTo('head');
}
,makeSortable:function (){
	var iNettuts = this,$ = this.jQuery,settings = this.settings,$sortableItems = (function (){
	var notSortable = '';
	$(settings.widgetSelector,$(settings.columns)).each(function (i){
	if (!iNettuts.getWidgetSettings(this.id).movable){
	if(!this.id){
	this.id = 'widget-no-id-' + i;
}
notSortable += '#' + this.id + ',';
}
}
);
	return $('> li:not(' + notSortable + ')',settings.columns);
}
)();
	$sortableItems.find(settings.handleSelector).css({
	cursor:'move'}
).mousedown(function (e){
	$sortableItems.css({
	width:''}
);
	$(this).parent().css({
	width:$(this).parent().width() + 'px'}
);
}
).mouseup(function (){
	if(!$(this).parent().hasClass('dragging')){
	$(this).parent().css({
	width:''}
);
}
else{
	$(settings.columns).sortable('disable');
}
}
);
	$(settings.columns).sortable({
	items:$sortableItems,connectWith:$(settings.columns),handle:settings.handleSelector,placeholder:'widget-placeholder',forcePlaceholderSize:true,revert:300,delay:100,opacity:0.8,containment:'document',start:function (e,ui){
	$(ui.helper).addClass('dragging');
}
,stop:function (e,ui){
	$(ui.item).css({
	width:''}
).removeClass('dragging');
	$(settings.columns).sortable('enable');
}
}
);
}
}
;
	iNettuts.init();

CSS代码(inettuts.css):

/* Reset */
body,img,p,h1,h2,h3,h4,h5,h6,ul,ol{margin:0;padding:0;list-style:none;border:none;}
/* End Reset */
body{font-size:0.8em;font-family:Arial,Verdana,Sans-Serif;background:#000;}
a{color:white;}
/* Colors */
.color-yellow{background:#f2bc00;}
.color-red{background:#dd0000;}
.color-blue{background:#148ea4;}
.color-white{background:#dfdfdf;}
.color-orange{background:#f66e00;}
.color-green{background:#8dc100;}
.color-yellow h3,.color-white h3,.color-green h3{color:#000;}
.color-red h3,.color-blue h3,.color-orange h3{color:#FFF;}
/* End Colors */
/* Head section */
#head{background:#000 url(img/head-bg.png) repeat-x;height:100px;color:#FFFFFF}
#head a{color:#FFFF00;}
#head h1{line-height:100px;color:#FFF;text-align:center;background:url(img/inettuts.png) no-repeat center;text-indent:-9999em}
/* End Head Section */
/* Columns section */
#columns .column{float:left;width:33.3%;/* Min-height:*/
min-height:400px;height:auto !important;height:400px;}
/* Column dividers (background-images):*/
#columns #column1{background:url(img/column-bg-left.png) no-repeat right top;}
#columns #column3{background:url(img/column-bg-right.png) no-repeat left top;}
#columns #column1 .widget{margin:30px 35px 0 25px;}
#columns #column3 .widget{margin:30px 25px 0 35px;}
#columns .widget{margin:30px 20px 0 20px;padding:2px;-moz-border-radius:4px;-webkit-border-radius:4px;}
#columns .widget .widget-head{color:#000;overflow:hidden;width:100%;height:30px;line-height:30px;}
#columns .widget .widget-head h3{padding:0 5px;float:left;}
#columns .widget .widget-content{background:#333 url(img/widget-content-bg.png) repeat-x;padding:0 5px;color:#DDD;-moz-border-radius-bottomleft:2px;-moz-border-radius-bottomright:2px;-webkit-border-bottom-left-radius:2px;-webkit-border-bottom-right-radius:2px;line-height:1.2em;overflow:hidden;}
#columns .widget .widget-content p{padding:0.8em 0;border-bottom:1px solid #666;}
#columns .widget .widget-content img{float:right;margin:10px;border:1px solid #FFF;}
#columns .widget .widget-content pre{padding:0.5em 5px;color:#EEE;font-size:12px;}
#columns .widget .widget-content ul{padding:5px 0 5px 20px;list-style:disc;}
#columns .widget .widget-content ul li{padding:3px 0;}
#columns .widget .widget-content ul.images{padding:7px 0 0 0;list-style:none;height:1%;}
#columns .widget .widget-content ul.images li{display:inline;float:left;}
#columns .widget .widget-content ul.images img{display:inline;float:left;margin:0 0 7px 7px;}
/* End Columns section */

附件:下载该文件资源,减少时间成本(增值服务)