JQuery implements drag-and-drop editable module function code. jquery drag-and-drop

JQuery implements drag-and-drop editable module function code. jquery drag-and-drop

Before sharing the implementation code, we will show you the following:

The specific implementation code is as follows:

Index.html

<! DOCTYPE html> 
Inettuts. js
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: fa Lse, removable: false, collapsible: false, editable: false}, dingzh: {movable: false, removable: false, collapsible: true }}, // initialize init: function () {this.attachStylesheet('inettuts.js.css '); this. addWidgetControls (); this. makeSortable () ;}, getWidgetSettings: function (id) {var $ = this. jQuery, settings = this. settings; // determine whether the ID module has defined return (id & settings. widgetIndividual [id])? $. Extend ({}, settings. widgetDefault, settings. widgetIndividual [id]): settings. widgetDefault ;}, // dynamic append element addWidgetControls: function () {var iNettuts = this, $ = this. jQuery, settings = this. settings; // set the selector environment // by default, the selector searches the DOM from the root of the document. However, you can set the optional context parameter for $. // If we want. search for an object in the column attribute. the widget class attribute element can be limited to the following search: $ (settings. widgetSelector, $ (settings. columns )). each (function () {// traverse the matched result var thisWidgetSettings = iNettuts. getWidgetSettings (this. id); // remove the form element if (thisWidgetSettings. removable) {$ ('<a href = "#" class = "remove"> CLOSE </a> '). mousedown (function (e) {// block event bubbling e. stopPropagation ();}). click (function () {if (confirm ('This widget will be deleted, OK? ') {$ (This ). parents (settings. widgetSelector ). animate ({opacity: 0}, function () {$ (this ). wrap ('<div/> '). parent (). the slideUp (function () {// Delete // remove () method removes the selected elements, including all text and subnodes. // This method does not delete the matching elements from the jQuery object, so you can use these matching elements in the future. $ (This ). remove () ;}) ;};} return false ;}). appendTo ($ (settings. handleSelector, this);} // edit the form element if (thisWidgetSettings. editable) {$ ('<a href = "#" class = "edit"> EDIT </a> '). mousedown (function (e) {e. stopPropagation ();}). toggle (function () {callback (this).css ({backgroundPosition: '-66px 0', width: '55px '}). parents (settings. widgetSelector ). find ('. edit-box '). show (). find ('input '). focus (); return false; }, Function () {callback (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);} // fold if (thisWidgetSettings. collapsible ){ $ ('<A href = "#" class = "collapse"> COLLAPSE </a> '). mousedown (function (e) {e. stopPropagation ();}). toggle (function () {callback (this).css ({backgroundPosition: '-38px 0 '}). parents (settings. widgetSelector ). find (settings. contentSelector ). hide (); return false ;}, function () {callback (this).css ({backgroundPosition: '-52px 0 '}). 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 (colorSt YlePattern) [0]);} return false;}) ;}, attachStylesheet: function (href) {var $ = this. jQuery; return $ ('<link href = "' + href + '" rel = "stylesheet" type = "text/css"/> '). appendTo ('head') ;}, // sort form layout makeSortable: function () {var iNettuts = this, $ = this. jQuery, settings = this. settings, $ sortableItems = (function () {var notSortable = ''; $ (settings. widgetSelector, $ (settings. columns )). Each (function (I) {// determines whether the property is movable. if (! INettuts. getWidgetSettings (this. id). movable) {if (! This. id) {this. id = 'widget-no-id-'+ I;} notSortable + =' # '+ this. id + ',' ;}}); return $ ('> li: not (' + notSortable + ')', settings. columns) ;}) (); sort sortableitems.find(settings.handleselectortor.css ({cursor: 'move '}). mousedown (function (e) {program sortableitems.css ({width: ''}); then (this).parent().css ({width: $ (this ). parent (). width () + 'px '});}). mouseup (function () {if (! $ (This ). parent (). hasClass ('dragging ') {detail (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) {detail (ui.item).css ({width :''}). removeClass ('dragging '); $ (settings. columns ). sortable ('enable') ;}}}}; iNettuts. init ();

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: #fff;}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: #fff url(img/head-bg.png) repeat-x; height: 100px;}#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;}#columns .column-dingzh { 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: #fff; 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 */
Inettuts.js.css
/* JS-Enabled CSS */.widget-head a.remove { float: right; display: inline; background: url(img/buttons.gif) no-repeat -24px 0; width: 14px; height: 14px; margin: 8px 4px 8px 0; text-indent: -9999em; outline: none;}.widget-head a.edit { float: right; display: inline; background: url(img/buttons.gif) no-repeat; width: 24px; height: 14px; text-indent: -9999em; margin: 8px 4px 8px 4px; outline: none;}.widget-head a.collapse { float: left; display: inline; background: url(img/buttons.gif) no-repeat -52px 0; width: 14px; height: 14px; text-indent: -9999em; margin: 8px 0 8px 4px; outline: none;}.widget-placeholder { border: 2px dashed #999;}#column1 .widget-placeholder { margin: 30px 35px 0 25px; }#column2 .widget-placeholder { margin: 30px 20px 0 20px; }#column3 .widget-placeholder { margin: 30px 25px 0 35px; }.edit-box { overflow: hidden; background: #333 url(img/widget-content-bg.png) repeat-x; margin-bottom: 2px; padding: 10px 0;}.edit-box li.item { padding: 10px 0; overflow: hidden; float: left; width: 100%; clear: both;}.edit-box label { float: left; width: 30%; color: #FFF; padding: 0 0 0 10px;}.edit-box ul.colors li { width: 20px; height: 20px; border: 1px solid #EEE; float: left; display: inline; margin: 0 5px 0 0; cursor: pointer;}