Create jQuery Dragable Image in Blogger ~ Tech Boy Arena

Create jQuery Dragable Image in Blogger
This Tutroial shows you "How to Create jQuery Dragable Image in Blogger Blogs". Before we move further first have a look at the DEMO of this tutorial so that you have an idea how it looks like and how you can use this in your blogs to make it more beautiful.
Follow the below Steps
1. First take a backup of your template is case anything goes wrong.
2. Login to your blogger dashboard--> layout- -> Edit HTML
3. Press Ctrl+F and Find "</head>" tag.

4. Copy below code and paste it just before the </head> tag.
Or if the above code don't work for your template then use the code below :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script><br><script type='text/javascript'><br>//<![CDATA[<br><br>/*<br> * jQuery UI 1.7.2<br> *<br> * Copyright undefinedc) 2009 AUTHORS.txt undefinedhttp://jqueryui.com/about)<br> * Dual licensed under the MIT undefinedMIT-LICENSE.txt)<br> * and GPL undefinedGPL-LICENSE.txt) licenses.<br> *<br> * http://docs.jquery.com/UI<br> */<br>;jQuery.ui || undefinedfunctionundefined$) {<br><br>var _remove = $.fn.remove,<br> isFF2 = $.browser.mozilla && undefinedparseFloatundefined$.browser.version) < 1.9);<br><br>//Helper functions and ui object<br>$.ui = {<br> version: "1.7.2",<br><br> // $.ui.plugin is deprecated.  Use the proxy pattern instead.<br> plugin: {<br>  add: functionundefinedmodule, option, set) {<br>   var proto = $.ui[module].prototype;<br>   forundefinedvar i in set) {<br>    proto.plugins[i] = proto.plugins[i] || [];<br>    proto.plugins[i].pushundefined[option, set[i]]);<br>   }<br>  },<br>  call: functionundefinedinstance, name, args) {<br>   var set = instance.plugins[name];<br>   ifundefined!set || !instance.element[0].parentNode) { return; }<br><br>   for undefinedvar i = 0; i < set.length; i++) {<br>    if undefinedinstance.options[set[i][0]]) {<br>     set[i][1].applyundefinedinstance.element, args);<br>    }<br>   }<br>  }<br> },<br><br> contains: functionundefineda, b) {<br>  return document.compareDocumentPosition<br>   ? a.compareDocumentPositionundefinedb) & 16<br>   : a !== b && a.containsundefinedb);<br> },<br><br> hasScroll: functionundefinedel, a) {<br><br>  //If overflow is hidden, the element might have extra content, but the user wants to hide it<br>  if undefined$undefinedel).cssundefined'overflow') == 'hidden') { return false; }<br><br>  var scroll = undefineda && a == 'left') ? 'scrollLeft' : 'scrollTop',<br>   has = false;<br><br>  if undefinedel[scroll] > 0) { return true; }<br><br>  // TODO: determine which cases actually cause this to happen<br>  // if the element doesn't have the scroll set, see if it's possible to<br>  // set the scroll<br>  el[scroll] = 1;<br>  has = undefinedel[scroll] > 0);<br>  el[scroll] = 0;<br>  return has;<br> },<br><br> isOverAxis: functionundefinedx, reference, size) {<br>  //Determines when x coordinate is over "b" element axis<br>  return undefinedx > reference) && undefinedx < undefinedreference + size));<br> },<br><br> isOver: functionundefinedy, x, top, left, height, width) {<br>  //Determines when x, y coordinates is over "b" element<br>  return $.ui.isOverAxisundefinedy, top, height) && $.ui.isOverAxisundefinedx, left, width);<br> },<br><br> keyCode: {<br>  BACKSPACE: 8,<br>  CAPS_LOCK: 20,<br>  COMMA: 188,<br>  CONTROL: 17,<br>  DELETE: 46,<br>  DOWN: 40,<br>  END: 35,<br>  ENTER: 13,<br>  ESCAPE: 27,<br>  HOME: 36,<br>  INSERT: 45,<br>  LEFT: 37,<br>  NUMPAD_ADD: 107,<br>  NUMPAD_DECIMAL: 110,<br>  NUMPAD_DIVIDE: 111,<br>  NUMPAD_ENTER: 108,<br>  NUMPAD_MULTIPLY: 106,<br>  NUMPAD_SUBTRACT: 109,<br>  PAGE_DOWN: 34,<br>  PAGE_UP: 33,<br>  PERIOD: 190,<br>  RIGHT: 39,<br>  SHIFT: 16,<br>  SPACE: 32,<br>  TAB: 9,<br>  UP: 38<br> }<br>};<br><br>// WAI-ARIA normalization<br>if undefinedisFF2) {<br> var attr = $.attr,<br>  removeAttr = $.fn.removeAttr,<br>  ariaNS = "http://www.w3.org/2005/07/aaa",<br>  ariaState = /^aria-/,<br>  ariaRole = /^wairole:/;<br><br> $.attr = functionundefinedelem, name, value) {<br>  var set = value !== undefined;<br><br>  return undefinedname == 'role'<br>   ? undefinedset<br>    ? attr.callundefinedthis, elem, name, "wairole:" + value)<br>    : undefinedattr.applyundefinedthis, arguments) || "").replaceundefinedariaRole, ""))<br>   : undefinedariaState.testundefinedname)<br>    ? undefinedset<br>     ? elem.setAttributeNSundefinedariaNS,<br>      name.replaceundefinedariaState, "aaa:"), value)<br>     : attr.callundefinedthis, elem, name.replaceundefinedariaState, "aaa:")))<br>    : attr.applyundefinedthis, arguments)));<br> };<br><br> $.fn.removeAttr = functionundefinedname) {<br>  return undefinedariaState.testundefinedname)<br>   ? this.eachundefinedfunctionundefined) {<br>    this.removeAttributeNSundefinedariaNS, name.replaceundefinedariaState, ""));<br>   }) : removeAttr.callundefinedthis, name));<br> };<br>}<br><br>//jQuery plugins<br>$.fn.extendundefined{<br> remove: functionundefined) {<br>  // Safari has a native remove event which actually removes DOM elements,<br>  // so we have to use triggerHandler instead of trigger undefined#3037).<br>  $undefined"*", this).addundefinedthis).eachundefinedfunctionundefined) {<br>   $undefinedthis).triggerHandlerundefined"remove");<br>  });<br>  return _remove.applyundefinedthis, arguments );<br> },<br><br> enableSelection: functionundefined) {<br>  return this<br>   .attrundefined'unselectable', 'off')<br>   .cssundefined'MozUserSelect', '')<br>   .unbindundefined'selectstart.ui');<br> },<br><br> disableSelection: functionundefined) {<br>  return this<br>   .attrundefined'unselectable', 'on')<br>   .cssundefined'MozUserSelect', 'none')<br>   .bindundefined'selectstart.ui', functionundefined) { return false; });<br> },<br><br> scrollParent: functionundefined) {<br>  var scrollParent;<br>  ifundefinedundefined$.browser.msie && undefined/undefinedstatic|relative)/).testundefinedthis.cssundefined'position'))) || undefined/absolute/).testundefinedthis.cssundefined'position'))) {<br>   scrollParent = this.parentsundefined).filterundefinedfunctionundefined) {<br>    return undefined/undefinedrelative|absolute|fixed)/).testundefined$.curCSSundefinedthis,'position',1)) && undefined/undefinedauto|scroll)/).testundefined$.curCSSundefinedthis,'overflow',1)+$.curCSSundefinedthis,'overflow-y',1)+$.curCSSundefinedthis,'overflow-x',1));<br>   }).equndefined0);<br>  } else {<br>   scrollParent = this.parentsundefined).filterundefinedfunctionundefined) {<br>    return undefined/undefinedauto|scroll)/).testundefined$.curCSSundefinedthis,'overflow',1)+$.curCSSundefinedthis,'overflow-y',1)+$.curCSSundefinedthis,'overflow-x',1));<br>   }).equndefined0);<br>  }<br><br>  return undefined/fixed/).testundefinedthis.cssundefined'position')) || !scrollParent.length ? $undefineddocument) : scrollParent;<br> }<br>});<br><br><br>//Additional selectors<br>$.extendundefined$.expr[':'], {<br> data: functionundefinedelem, i, match) {<br>  return !!$.dataundefinedelem, match[3]);<br> },<br><br> focusable: functionundefinedelement) {<br>  var nodeName = element.nodeName.toLowerCaseundefined),<br>   tabIndex = $.attrundefinedelement, 'tabindex');<br>  return undefined/input|select|textarea|button|object/.testundefinednodeName)<br>   ? !element.disabled<br>   : 'a' == nodeName || 'area' == nodeName<br>    ? element.href || !isNaNundefinedtabIndex)<br>    : !isNaNundefinedtabIndex))<br>   // the element and all of its ancestors must be visible<br>   // the browser may report that the area is hidden<br>   && !$undefinedelement)['area' == nodeName ? 'parents' : 'closest']undefined':hidden').length;<br> },<br><br> tabbable: functionundefinedelement) {<br>  var tabIndex = $.attrundefinedelement, 'tabindex');<br>  return undefinedisNaNundefinedtabIndex) || tabIndex >= 0) && $undefinedelement).isundefined':focusable');<br> }<br>});<br><br><br>// $.widget is a factory to create jQuery plugins<br>// taking some boilerplate code out of the plugin code<br>function getterundefinednamespace, plugin, method, args) {<br> function getMethodsundefinedtype) {<br>  var methods = $[namespace][plugin][type] || [];<br>  return undefinedtypeof methods == 'string' ? methods.splitundefined/,?\s+/) : methods);<br> }<br><br> var methods = getMethodsundefined'getter');<br> if undefinedargs.length == 1 && typeof args[0] == 'string') {<br>  methods = methods.concatundefinedgetMethodsundefined'getterSetter'));<br> }<br> return undefined$.inArrayundefinedmethod, methods) != -1);<br>}<br><br>$.widget = functionundefinedname, prototype) {<br> var namespace = name.splitundefined".")[0];<br> name = name.splitundefined".")[1];<br><br> // create plugin method<br> $.fn[name] = functionundefinedoptions) {<br>  var isMethodCall = undefinedtypeof options == 'string'),<br>   args = Array.prototype.slice.callundefinedarguments, 1);<br><br>  // prevent calls to internal methods<br>  if undefinedisMethodCall && options.substringundefined0, 1) == '_') {<br>   return this;<br>  }<br><br>  // handle getter methods<br>  if undefinedisMethodCall && getterundefinednamespace, name, options, args)) {<br>   var instance = $.dataundefinedthis[0], name);<br>   return undefinedinstance ? instance[options].applyundefinedinstance, args)<br>    : undefined);<br>  }<br><br>  // handle initialization and non-getter methods<br>  return this.eachundefinedfunctionundefined) {<br>   var instance = $.dataundefinedthis, name);<br><br>   // constructor<br>   undefined!instance && !isMethodCall &&<br>    $.dataundefinedthis, name, new $[namespace][name]undefinedthis, options))._initundefined));<br><br>   // method call<br>   undefinedinstance && isMethodCall && $.isFunctionundefinedinstance[options]) &&<br>    instance[options].applyundefinedinstance, args));<br>  });<br> };<br><br> // create widget constructor<br> $[namespace] = $[namespace] || {};<br> $[namespace][name] = functionundefinedelement, options) {<br>  var self = this;<br><br>  this.namespace = namespace;<br>  this.widgetName = name;<br>  this.widgetEventPrefix = $[namespace][name].eventPrefix || name;<br>  this.widgetBaseClass = namespace + '-' + name;<br><br>  this.options = $.extendundefined{},<br>   $.widget.defaults,<br>   $[namespace][name].defaults,<br>   $.metadata && $.metadata.getundefinedelement)[name],<br>   options);<br><br>  this.element = $undefinedelement)<br>   .bindundefined'setData.' + name, functionundefinedevent, key, value) {<br>    if undefinedevent.target == element) {<br>     return self._setDataundefinedkey, value);<br>    }<br>   })<br>   .bindundefined'getData.' + name, functionundefinedevent, key) {<br>    if undefinedevent.target == element) {<br>     return self._getDataundefinedkey);<br>    }<br>   })<br>   .bindundefined'remove', functionundefined) {<br>    return self.destroyundefined);<br>   });<br> };<br><br> // add widget prototype<br> $[namespace][name].prototype = $.extendundefined{}, $.widget.prototype, prototype);<br><br> // TODO: merge getter and getterSetter properties from widget prototype<br> // and plugin prototype<br> $[namespace][name].getterSetter = 'option';<br>};<br><br>$.widget.prototype = {<br> _init: functionundefined) {},<br> destroy: functionundefined) {<br>  this.element.removeDataundefinedthis.widgetName)<br>   .removeClassundefinedthis.widgetBaseClass + '-disabled' + ' ' + this.namespace + '-state-disabled')<br>   .removeAttrundefined'aria-disabled');<br> },<br><br> option: functionundefinedkey, value) {<br>  var options = key,<br>   self = this;<br><br>  if undefinedtypeof key == "string") {<br>   if undefinedvalue === undefined) {<br>    return this._getDataundefinedkey);<br>   }<br>   options = {};<br>   options[key] = value;<br>  }<br><br>  $.eachundefinedoptions, functionundefinedkey, value) {<br>   self._setDataundefinedkey, value);<br>  });<br> },<br> _getData: functionundefinedkey) {<br>  return this.options[key];<br> },<br> _setData: functionundefinedkey, value) {<br>  this.options[key] = value;<br><br>  if undefinedkey == 'disabled') {<br>   this.element<br>    [value ? 'addClass' : 'removeClass']undefined<br>     this.widgetBaseClass + '-disabled' + ' ' +<br>     this.namespace + '-state-disabled')<br>    .attrundefined"aria-disabled", value);<br>  }<br> },<br><br> enable: functionundefined) {<br>  this._setDataundefined'disabled', false);<br> },<br> disable: functionundefined) {<br>  this._setDataundefined'disabled', true);<br> },<br><br> _trigger: functionundefinedtype, event, data) {<br>  var callback = this.options[type],<br>   eventName = undefinedtype == this.widgetEventPrefix<br>    ? type : this.widgetEventPrefix + type);<br><br>  event = $.Eventundefinedevent);<br>  event.type = eventName;<br><br>  // copy original event properties over to the new event<br>  // this would happen if we could call $.event.fix instead of $.Event<br>  // but we don't have a way to force an event to be fixed multiple times<br>  if undefinedevent.originalEvent) {<br>   for undefinedvar i = $.event.props.length, prop; i;) {<br>    prop = $.event.props[--i];<br>    event[prop] = event.originalEvent[prop];<br>   }<br>  }<br><br>  this.element.triggerundefinedevent, data);<br><br>  return !undefined$.isFunctionundefinedcallback) && callback.callundefinedthis.element[0], event, data) === false<br>   || event.isDefaultPreventedundefined));<br> }<br>};<br><br>$.widget.defaults = {<br> disabled: false<br>};<br><br><br>/** Mouse Interaction Plugin **/<br><br>$.ui.mouse = {<br> _mouseInit: functionundefined) {<br>  var self = this;<br><br>  this.element<br>   .bindundefined'mousedown.'+this.widgetName, functionundefinedevent) {<br>    return self._mouseDownundefinedevent);<br>   })<br>   .bindundefined'click.'+this.widgetName, functionundefinedevent) {<br>    ifundefinedself._preventClickEvent) {<br>     self._preventClickEvent = false;<br>     event.stopImmediatePropagationundefined);<br>     return false;<br>    }<br>   });<br><br>  // Prevent text selection in IE<br>  if undefined$.browser.msie) {<br>   this._mouseUnselectable = this.element.attrundefined'unselectable');<br>   this.element.attrundefined'unselectable', 'on');<br>  }<br><br>  this.started = false;<br> },<br><br> // TODO: make sure destroying one instance of mouse doesn't mess with<br> // other instances of mouse<br> _mouseDestroy: functionundefined) {<br>  this.element.unbindundefined'.'+this.widgetName);<br><br>  // Restore text selection in IE<br>  undefined$.browser.msie<br>   && this.element.attrundefined'unselectable', this._mouseUnselectable));<br> },<br><br> _mouseDown: functionundefinedevent) {<br>  // don't let more than one widget handle mouseStart<br>  // TODO: figure out why we have to use originalEvent<br>  event.originalEvent = event.originalEvent || {};<br>  if undefinedevent.originalEvent.mouseHandled) { return; }<br><br>  // we may have missed mouseup undefinedout of window)<br>  undefinedthis._mouseStarted && this._mouseUpundefinedevent));<br><br>  this._mouseDownEvent = event;<br><br>  var self = this,<br>   btnIsLeft = undefinedevent.which == 1),<br>   elIsCancel = undefinedtypeof this.options.cancel == "string" ? $undefinedevent.target).parentsundefined).addundefinedevent.target).filterundefinedthis.options.cancel).length : false);<br>  if undefined!btnIsLeft || elIsCancel || !this._mouseCaptureundefinedevent)) {<br>   return true;<br>  }<br><br>  this.mouseDelayMet = !this.options.delay;<br>  if undefined!this.mouseDelayMet) {<br>   this._mouseDelayTimer = setTimeoutundefinedfunctionundefined) {<br>    self.mouseDelayMet = true;<br>   }, this.options.delay);<br>  }<br><br>  if undefinedthis._mouseDistanceMetundefinedevent) && this._mouseDelayMetundefinedevent)) {<br>   this._mouseStarted = undefinedthis._mouseStartundefinedevent) !== false);<br>   if undefined!this._mouseStarted) {<br>    event.preventDefaultundefined);<br>    return true;<br>   }<br>  }<br><br>  // these delegates are required to keep context<br>  this._mouseMoveDelegate = functionundefinedevent) {<br>   return self._mouseMoveundefinedevent);<br>  };<br>  this._mouseUpDelegate = functionundefinedevent) {<br>   return self._mouseUpundefinedevent);<br>  };<br>  $undefineddocument)<br>   .bindundefined'mousemove.'+this.widgetName, this._mouseMoveDelegate)<br>   .bindundefined'mouseup.'+this.widgetName, this._mouseUpDelegate);<br><br>  // preventDefaultundefined) is used to prevent the selection of text here -<br>  // however, in Safari, this causes select boxes not to be selectable<br>  // anymore, so this fix is needed<br>  undefined$.browser.safari || event.preventDefaultundefined));<br><br>  event.originalEvent.mouseHandled = true;<br>  return true;<br> },<br><br> _mouseMove: functionundefinedevent) {<br>  // IE mouseup check - mouseup happened when mouse was out of window<br>  if undefined$.browser.msie && !event.button) {<br>   return this._mouseUpundefinedevent);<br>  }<br><br>  if undefinedthis._mouseStarted) {<br>   this._mouseDragundefinedevent);<br>   return event.preventDefaultundefined);<br>  }<br><br>  if undefinedthis._mouseDistanceMetundefinedevent) && this._mouseDelayMetundefinedevent)) {<br>   this._mouseStarted =<br>    undefinedthis._mouseStartundefinedthis._mouseDownEvent, event) !== false);<br>   undefinedthis._mouseStarted ? this._mouseDragundefinedevent) : this._mouseUpundefinedevent));<br>  }<br><br>  return !this._mouseStarted;<br> },<br><br> _mouseUp: functionundefinedevent) {<br>  $undefineddocument)<br>   .unbindundefined'mousemove.'+this.widgetName, this._mouseMoveDelegate)<br>   .unbindundefined'mouseup.'+this.widgetName, this._mouseUpDelegate);<br><br>  if undefinedthis._mouseStarted) {<br>   this._mouseStarted = false;<br>   this._preventClickEvent = undefinedevent.target == this._mouseDownEvent.target);<br>   this._mouseStopundefinedevent);<br>  }<br><br>  return false;<br> },<br><br> _mouseDistanceMet: functionundefinedevent) {<br>  return undefinedMath.maxundefined<br>    Math.absundefinedthis._mouseDownEvent.pageX - event.pageX),<br>    Math.absundefinedthis._mouseDownEvent.pageY - event.pageY)<br>   ) >= this.options.distance<br>  );<br> },<br><br> _mouseDelayMet: functionundefinedevent) {<br>  return this.mouseDelayMet;<br> },<br><br> // These are placeholder methods, to be overriden by extending plugin<br> _mouseStart: functionundefinedevent) {},<br> _mouseDrag: functionundefinedevent) {},<br> _mouseStop: functionundefinedevent) {},<br> _mouseCapture: functionundefinedevent) { return true; }<br>};<br><br>$.ui.mouse.defaults = {<br> cancel: null,<br> distance: 1,<br> delay: 0<br>};<br><br>})undefinedjQuery);<br><br>//]]><br></script><br><script type='text/javascript'><br>//<![CDATA[<br><br>/*<br> * jQuery UI Draggable 1.7.2<br> *<br> * Copyright undefinedc) 2009 AUTHORS.txt undefinedhttp://jqueryui.com/about)<br> * Dual licensed under the MIT undefinedMIT-LICENSE.txt)<br> * and GPL undefinedGPL-LICENSE.txt) licenses.<br> *<br> * http://docs.jquery.com/UI/Draggables<br> *<br> * Depends:<br> * ui.core.js<br> */<br>undefinedfunctionundefined$) {<br><br>$.widgetundefined"ui.draggable", $.extendundefined{}, $.ui.mouse, {<br><br> _init: functionundefined) {<br><br>  if undefinedthis.options.helper == 'original' && !undefined/^undefined?:r|a|f)/).testundefinedthis.element.cssundefined"position")))<br>   this.element[0].style.position = 'relative';<br><br>  undefinedthis.options.addClasses && this.element.addClassundefined"ui-draggable"));<br>  undefinedthis.options.disabled && this.element.addClassundefined"ui-draggable-disabled"));<br><br>  this._mouseInitundefined);<br><br> },<br><br> destroy: functionundefined) {<br>  ifundefined!this.element.dataundefined'draggable')) return;<br>  this.element<br>   .removeDataundefined"draggable")<br>   .unbindundefined".draggable")<br>   .removeClassundefined"ui-draggable"<br>    + " ui-draggable-dragging"<br>    + " ui-draggable-disabled");<br>  this._mouseDestroyundefined);<br> },<br><br> _mouseCapture: functionundefinedevent) {<br><br>  var o = this.options;<br><br>  if undefinedthis.helper || o.disabled || $undefinedevent.target).isundefined'.ui-resizable-handle'))<br>   return false;<br><br>  //Quit if we're not on a valid handle<br>  this.handle = this._getHandleundefinedevent);<br>  if undefined!this.handle)<br>   return false;<br><br>  return true;<br><br> },<br><br> _mouseStart: functionundefinedevent) {<br><br>  var o = this.options;<br><br>  //Create and append the visible helper<br>  this.helper = this._createHelperundefinedevent);<br><br>  //Cache the helper size<br>  this._cacheHelperProportionsundefined);<br><br>  //If ddmanager is used for droppables, set the global draggable<br>  ifundefined$.ui.ddmanager)<br>   $.ui.ddmanager.current = this;<br><br>  /*<br>   * - Position generation -<br>   * This block generates everything position related - it's the core of draggables.<br>   */<br><br>  //Cache the margins of the original element<br>  this._cacheMarginsundefined);<br><br>  //Store the helper's css position<br>  this.cssPosition = this.helper.cssundefined"position");<br>  this.scrollParent = this.helper.scrollParentundefined);<br><br>  //The element's absolute position on the page minus margins<br>  this.offset = this.element.offsetundefined);<br>  this.offset = {<br>   top: this.offset.top - this.margins.top,<br>   left: this.offset.left - this.margins.left<br>  };<br><br>  $.extendundefinedthis.offset, {<br>   click: { //Where the click happened, relative to the element<br>    left: event.pageX - this.offset.left,<br>    top: event.pageY - this.offset.top<br>   },<br>   parent: this._getParentOffsetundefined),<br>   relative: this._getRelativeOffsetundefined) //This is a relative to absolute position minus the actual position calculation - only used for relative positioned helper<br>  });<br><br>  //Generate the original position<br>  this.originalPosition = this._generatePositionundefinedevent);<br>  this.originalPageX = event.pageX;<br>  this.originalPageY = event.pageY;<br><br>  //Adjust the mouse offset relative to the helper if 'cursorAt' is supplied<br>  ifundefinedo.cursorAt)<br>   this._adjustOffsetFromHelperundefinedo.cursorAt);<br><br>  //Set a containment if given in the options<br>  ifundefinedo.containment)<br>   this._setContainmentundefined);<br><br>  //Call plugins and callbacks<br>  this._triggerundefined"start", event);<br><br>  //Recache the helper size<br>  this._cacheHelperProportionsundefined);<br><br>  //Prepare the droppable offsets<br>  if undefined$.ui.ddmanager && !o.dropBehaviour)<br>   $.ui.ddmanager.prepareOffsetsundefinedthis, event);<br><br>  this.helper.addClassundefined"ui-draggable-dragging");<br>  this._mouseDragundefinedevent, true); //Execute the drag once - this causes the helper not to be visible before getting its correct position<br>  return true;<br> },<br><br> _mouseDrag: functionundefinedevent, noPropagation) {<br><br>  //Compute the helpers position<br>  this.position = this._generatePositionundefinedevent);<br>  this.positionAbs = this._convertPositionToundefined"absolute");<br><br>  //Call plugins and callbacks and use the resulting position if something is returned<br>  if undefined!noPropagation) {<br>   var ui = this._uiHashundefined);<br>   this._triggerundefined'drag', event, ui);<br>   this.position = ui.position;<br>  }<br><br>  ifundefined!this.options.axis || this.options.axis != "y") this.helper[0].style.left = this.position.left+'px';<br>  ifundefined!this.options.axis || this.options.axis != "x") this.helper[0].style.top = this.position.top+'px';<br>  ifundefined$.ui.ddmanager) $.ui.ddmanager.dragundefinedthis, event);<br><br>  return false;<br> },<br><br> _mouseStop: functionundefinedevent) {<br><br>  //If we are using droppables, inform the manager about the drop<br>  var dropped = false;<br>  if undefined$.ui.ddmanager && !this.options.dropBehaviour)<br>   dropped = $.ui.ddmanager.dropundefinedthis, event);<br><br>  //if a drop comes from outside undefineda sortable)<br>  ifundefinedthis.dropped) {<br>   dropped = this.dropped;<br>   this.dropped = false;<br>  }<br><br>  ifundefinedundefinedthis.options.revert == "invalid" && !dropped) || undefinedthis.options.revert == "valid" && dropped) || this.options.revert === true || undefined$.isFunctionundefinedthis.options.revert) && this.options.revert.callundefinedthis.element, dropped))) {<br>   var self = this;<br>   $undefinedthis.helper).animateundefinedthis.originalPosition, parseIntundefinedthis.options.revertDuration, 10), functionundefined) {<br>    self._triggerundefined"stop", event);<br>    self._clearundefined);<br>   });<br>  } else {<br>   this._triggerundefined"stop", event);<br>   this._clearundefined);<br>  }<br><br>  return false;<br> },<br><br> _getHandle: functionundefinedevent) {<br><br>  var handle = !this.options.handle || !$undefinedthis.options.handle, this.element).length ? true : false;<br>  $undefinedthis.options.handle, this.element)<br>   .findundefined"*")<br>   .andSelfundefined)<br>   .eachundefinedfunctionundefined) {<br>    ifundefinedthis == event.target) handle = true;<br>   });<br><br>  return handle;<br><br> },<br><br> _createHelper: functionundefinedevent) {<br><br>  var o = this.options;<br>  var helper = $.isFunctionundefinedo.helper) ? $undefinedo.helper.applyundefinedthis.element[0], [event])) : undefinedo.helper == 'clone' ? this.element.cloneundefined) : this.element);<br><br>  ifundefined!helper.parentsundefined'body').length)<br>   helper.appendToundefinedundefinedo.appendTo == 'parent' ? this.element[0].parentNode : o.appendTo));<br><br>  ifundefinedhelper[0] != this.element[0] && !undefined/undefinedfixed|absolute)/).testundefinedhelper.cssundefined"position")))<br>   helper.cssundefined"position", "absolute");<br><br>  return helper;<br><br> },<br><br> _adjustOffsetFromHelper: functionundefinedobj) {<br>  ifundefinedobj.left != undefined) this.offset.click.left = obj.left + this.margins.left;<br>  ifundefinedobj.right != undefined) this.offset.click.left = this.helperProportions.width - obj.right + this.margins.left;<br>  ifundefinedobj.top != undefined) this.offset.click.top = obj.top + this.margins.top;<br>  ifundefinedobj.bottom != undefined) this.offset.click.top = this.helperProportions.height - obj.bottom + this.margins.top;<br> },<br><br> _getParentOffset: functionundefined) {<br><br>  //Get the offsetParent and cache its position<br>  this.offsetParent = this.helper.offsetParentundefined);<br>  var po = this.offsetParent.offsetundefined);<br><br>  // This is a special case where we need to modify a offset calculated on start, since the following happened:<br>  // 1. The position of the helper is absolute, so it's position is calculated based on the next positioned parent<br>  // 2. The actual offset parent is a child of the scroll parent, and the scroll parent isn't the document, which means that<br>  //    the scroll is included in the initial calculation of the offset of the parent, and never recalculated upon drag<br>  ifundefinedthis.cssPosition == 'absolute' && this.scrollParent[0] != document && $.ui.containsundefinedthis.scrollParent[0], this.offsetParent[0])) {<br>   po.left += this.scrollParent.scrollLeftundefined);<br>   po.top += this.scrollParent.scrollTopundefined);<br>  }<br><br>  ifundefinedundefinedthis.offsetParent[0] == document.body) //This needs to be actually done for all browsers, since pageX/pageY includes this information<br>  || undefinedthis.offsetParent[0].tagName && this.offsetParent[0].tagName.toLowerCaseundefined) == 'html' && $.browser.msie)) //Ugly IE fix<br>   po = { top: 0, left: 0 };<br><br>  return {<br>   top: po.top + undefinedparseIntundefinedthis.offsetParent.cssundefined"borderTopWidth"),10) || 0),<br>   left: po.left + undefinedparseIntundefinedthis.offsetParent.cssundefined"borderLeftWidth"),10) || 0)<br>  };<br><br> },<br><br> _getRelativeOffset: functionundefined) {<br><br>  ifundefinedthis.cssPosition == "relative") {<br>   var p = this.element.positionundefined);<br>   return {<br>    top: p.top - undefinedparseIntundefinedthis.helper.cssundefined"top"),10) || 0) + this.scrollParent.scrollTopundefined),<br>    left: p.left - undefinedparseIntundefinedthis.helper.cssundefined"left"),10) || 0) + this.scrollParent.scrollLeftundefined)<br>   };<br>  } else {<br>   return { top: 0, left: 0 };<br>  }<br><br> },<br><br> _cacheMargins: functionundefined) {<br>  this.margins = {<br>   left: undefinedparseIntundefinedthis.element.cssundefined"marginLeft"),10) || 0),<br>   top: undefinedparseIntundefinedthis.element.cssundefined"marginTop"),10) || 0)<br>  };<br> },<br><br> _cacheHelperProportions: functionundefined) {<br>  this.helperProportions = {<br>   width: this.helper.outerWidthundefined),<br>   height: this.helper.outerHeightundefined)<br>  };<br> },<br><br> _setContainment: functionundefined) {<br><br>  var o = this.options;<br>  ifundefinedo.containment == 'parent') o.containment = this.helper[0].parentNode;<br>  ifundefinedo.containment == 'document' || o.containment == 'window') this.containment = [<br>   0 - this.offset.relative.left - this.offset.parent.left,<br>   0 - this.offset.relative.top - this.offset.parent.top,<br>   $undefinedo.containment == 'document' ? document : window).widthundefined) - this.helperProportions.width - this.margins.left,<br>   undefined$undefinedo.containment == 'document' ? document : window).heightundefined) || document.body.parentNode.scrollHeight) - this.helperProportions.height - this.margins.top<br>  ];<br><br>  ifundefined!undefined/^undefineddocument|window|parent)$/).testundefinedo.containment) && o.containment.constructor != Array) {<br>   var ce = $undefinedo.containment)[0]; ifundefined!ce) return;<br>   var co = $undefinedo.containment).offsetundefined);<br>   var over = undefined$undefinedce).cssundefined"overflow") != 'hidden');<br><br>   this.containment = [<br>    co.left + undefinedparseIntundefined$undefinedce).cssundefined"borderLeftWidth"),10) || 0) + undefinedparseIntundefined$undefinedce).cssundefined"paddingLeft"),10) || 0) - this.margins.left,<br>    co.top + undefinedparseIntundefined$undefinedce).cssundefined"borderTopWidth"),10) || 0) + undefinedparseIntundefined$undefinedce).cssundefined"paddingTop"),10) || 0) - this.margins.top,<br>    co.left+undefinedover ? Math.maxundefinedce.scrollWidth,ce.offsetWidth) : ce.offsetWidth) - undefinedparseIntundefined$undefinedce).cssundefined"borderLeftWidth"),10) || 0) - undefinedparseIntundefined$undefinedce).cssundefined"paddingRight"),10) || 0) - this.helperProportions.width - this.margins.left,<br>    co.top+undefinedover ? Math.maxundefinedce.scrollHeight,ce.offsetHeight) : ce.offsetHeight) - undefinedparseIntundefined$undefinedce).cssundefined"borderTopWidth"),10) || 0) - undefinedparseIntundefined$undefinedce).cssundefined"paddingBottom"),10) || 0) - this.helperProportions.height - this.margins.top<br>   ];<br>  } else ifundefinedo.containment.constructor == Array) {<br>   this.containment = o.containment;<br>  }<br><br> },<br><br> _convertPositionTo: functionundefinedd, pos) {<br><br>  ifundefined!pos) pos = this.position;<br>  var mod = d == "absolute" ? 1 : -1;<br>  var o = this.options, scroll = this.cssPosition == 'absolute' && !undefinedthis.scrollParent[0] != document && $.ui.containsundefinedthis.scrollParent[0], this.offsetParent[0])) ? this.offsetParent : this.scrollParent, scrollIsRootNode = undefined/undefinedhtml|body)/i).testundefinedscroll[0].tagName);<br><br>  return {<br>   top: undefined<br>    pos.top                 // The absolute mouse position<br>    + this.offset.relative.top * mod          // Only for relative positioned nodes: Relative offset from element to offset parent<br>    + this.offset.parent.top * mod           // The offsetParent's offset without borders undefinedoffset + border)<br>    - undefined$.browser.safari && this.cssPosition == 'fixed' ? 0 : undefined this.cssPosition == 'fixed' ? -this.scrollParent.scrollTopundefined) : undefined scrollIsRootNode ? 0 : scroll.scrollTopundefined) ) ) * mod)<br>   ),<br>   left: undefined<br>    pos.left                // The absolute mouse position<br>    + this.offset.relative.left * mod          // Only for relative positioned nodes: Relative offset from element to offset parent<br>    + this.offset.parent.left * mod           // The offsetParent's offset without borders undefinedoffset + border)<br>    - undefined$.browser.safari && this.cssPosition == 'fixed' ? 0 : undefined this.cssPosition == 'fixed' ? -this.scrollParent.scrollLeftundefined) : scrollIsRootNode ? 0 : scroll.scrollLeftundefined) ) * mod)<br>   )<br>  };<br><br> },<br><br> _generatePosition: functionundefinedevent) {<br><br>  var o = this.options, scroll = this.cssPosition == 'absolute' && !undefinedthis.scrollParent[0] != document && $.ui.containsundefinedthis.scrollParent[0], this.offsetParent[0])) ? this.offsetParent : this.scrollParent, scrollIsRootNode = undefined/undefinedhtml|body)/i).testundefinedscroll[0].tagName);<br><br>  // This is another very weird special case that only happens for relative elements:<br>  // 1. If the css position is relative<br>  // 2. and the scroll parent is the document or similar to the offset parent<br>  // we have to refresh the relative offset during the scroll so there are no jumps<br>  ifundefinedthis.cssPosition == 'relative' && !undefinedthis.scrollParent[0] != document && this.scrollParent[0] != this.offsetParent[0])) {<br>   this.offset.relative = this._getRelativeOffsetundefined);<br>  }<br><br>  var pageX = event.pageX;<br>  var pageY = event.pageY;<br><br>  /*<br>   * - Position constraining -<br>   * Constrain the position to a mix of grid, containment.<br>   */<br><br>  ifundefinedthis.originalPosition) { //If we are not dragging yet, we won't check for options<br><br>   ifundefinedthis.containment) {<br>    ifundefinedevent.pageX - this.offset.click.left < this.containment[0]) pageX = this.containment[0] + this.offset.click.left;<br>    ifundefinedevent.pageY - this.offset.click.top < this.containment[1]) pageY = this.containment[1] + this.offset.click.top;<br>    ifundefinedevent.pageX - this.offset.click.left > this.containment[2]) pageX = this.containment[2] + this.offset.click.left;<br>    ifundefinedevent.pageY - this.offset.click.top > this.containment[3]) pageY = this.containment[3] + this.offset.click.top;<br>   }<br><br>   ifundefinedo.grid) {<br>    var top = this.originalPageY + Math.roundundefinedundefinedpageY - this.originalPageY) / o.grid[1]) * o.grid[1];<br>    pageY = this.containment ? undefined!undefinedtop - this.offset.click.top < this.containment[1] || top - this.offset.click.top > this.containment[3]) ? top : undefined!undefinedtop - this.offset.click.top < this.containment[1]) ? top - o.grid[1] : top + o.grid[1])) : top;<br><br>    var left = this.originalPageX + Math.roundundefinedundefinedpageX - this.originalPageX) / o.grid[0]) * o.grid[0];<br>    pageX = this.containment ? undefined!undefinedleft - this.offset.click.left < this.containment[0] || left - this.offset.click.left > this.containment[2]) ? left : undefined!undefinedleft - this.offset.click.left < this.containment[0]) ? left - o.grid[0] : left + o.grid[0])) : left;<br>   }<br><br>  }<br><br>  return {<br>   top: undefined<br>    pageY                // The absolute mouse position<br>    - this.offset.click.top             // Click offset undefinedrelative to the element)<br>    - this.offset.relative.top            // Only for relative positioned nodes: Relative offset from element to offset parent<br>    - this.offset.parent.top            // The offsetParent's offset without borders undefinedoffset + border)<br>    + undefined$.browser.safari && this.cssPosition == 'fixed' ? 0 : undefined this.cssPosition == 'fixed' ? -this.scrollParent.scrollTopundefined) : undefined scrollIsRootNode ? 0 : scroll.scrollTopundefined) ) ))<br>   ),<br>   left: undefined<br>    pageX                // The absolute mouse position<br>    - this.offset.click.left            // Click offset undefinedrelative to the element)<br>    - this.offset.relative.left            // Only for relative positioned nodes: Relative offset from element to offset parent<br>    - this.offset.parent.left            // The offsetParent's offset without borders undefinedoffset + border)<br>    + undefined$.browser.safari && this.cssPosition == 'fixed' ? 0 : undefined this.cssPosition == 'fixed' ? -this.scrollParent.scrollLeftundefined) : scrollIsRootNode ? 0 : scroll.scrollLeftundefined) ))<br>   )<br>  };<br><br> },<br><br> _clear: functionundefined) {<br>  this.helper.removeClassundefined"ui-draggable-dragging");<br>  ifundefinedthis.helper[0] != this.element[0] && !this.cancelHelperRemoval) this.helper.removeundefined);<br>  //ifundefined$.ui.ddmanager) $.ui.ddmanager.current = null;<br>  this.helper = null;<br>  this.cancelHelperRemoval = false;<br> },<br><br> // From now on bulk stuff - mainly helpers<br><br> _trigger: functionundefinedtype, event, ui) {<br>  ui = ui || this._uiHashundefined);<br>  $.ui.plugin.callundefinedthis, type, [event, ui]);<br>  ifundefinedtype == "drag") this.positionAbs = this._convertPositionToundefined"absolute"); //The absolute position has to be recalculated after plugins<br>  return $.widget.prototype._trigger.callundefinedthis, type, event, ui);<br> },<br><br> plugins: {},<br><br> _uiHash: functionundefinedevent) {<br>  return {<br>   helper: this.helper,<br>   position: this.position,<br>   absolutePosition: this.positionAbs, //deprecated<br>   offset: this.positionAbs<br>  };<br> }<br><br>}));<br><br>$.extendundefined$.ui.draggable, {<br> version: "1.7.2",<br> eventPrefix: "drag",<br> defaults: {<br>  addClasses: true,<br>  appendTo: "parent",<br>  axis: false,<br>  cancel: ":input,option",<br>  connectToSortable: false,<br>  containment: false,<br>  cursor: "auto",<br>  cursorAt: false,<br>  delay: 0,<br>  distance: 1,<br>  grid: false,<br>  handle: false,<br>  helper: "original",<br>  iframeFix: false,<br>  opacity: false,<br>  refreshPositions: false,<br>  revert: false,<br>  revertDuration: 500,<br>  scope: "default",<br>  scroll: true,<br>  scrollSensitivity: 20,<br>  scrollSpeed: 20,<br>  snap: false,<br>  snapMode: "both",<br>  snapTolerance: 20,<br>  stack: false,<br>  zIndex: false<br> }<br>});<br><br>$.ui.plugin.addundefined"draggable", "connectToSortable", {<br> start: functionundefinedevent, ui) {<br><br>  var inst = $undefinedthis).dataundefined"draggable"), o = inst.options,<br>   uiSortable = $.extendundefined{}, ui, { item: inst.element });<br>  inst.sortables = [];<br>  $undefinedo.connectToSortable).eachundefinedfunctionundefined) {<br>   var sortable = $.dataundefinedthis, 'sortable');<br>   if undefinedsortable && !sortable.options.disabled) {<br>    inst.sortables.pushundefined{<br>     instance: sortable,<br>     shouldRevert: sortable.options.revert<br>    });<br>    sortable._refreshItemsundefined); //Do a one-time refresh at start to refresh the containerCache<br>    sortable._triggerundefined"activate", event, uiSortable);<br>   }<br>  });<br><br> },<br> stop: functionundefinedevent, ui) {<br><br>  //If we are still over the sortable, we fake the stop event of the sortable, but also remove helper<br>  var inst = $undefinedthis).dataundefined"draggable"),<br>   uiSortable = $.extendundefined{}, ui, { item: inst.element });<br><br>  $.eachundefinedinst.sortables, functionundefined) {<br>   ifundefinedthis.instance.isOver) {<br><br>    this.instance.isOver = 0;<br><br>    inst.cancelHelperRemoval = true; //Don't remove the helper in the draggable instance<br>    this.instance.cancelHelperRemoval = false; //Remove it in the sortable instance undefinedso sortable plugins like revert still work)<br><br>    //The sortable revert is supported, and we have to set a temporary dropped variable on the draggable to support revert: 'valid/invalid'<br>    ifundefinedthis.shouldRevert) this.instance.options.revert = true;<br><br>    //Trigger the stop of the sortable<br>    this.instance._mouseStopundefinedevent);<br><br>    this.instance.options.helper = this.instance.options._helper;<br><br>    //If the helper has been the original item, restore properties in the sortable<br>    ifundefinedinst.options.helper == 'original')<br>     this.instance.currentItem.cssundefined{ top: 'auto', left: 'auto' });<br><br>   } else {<br>    this.instance.cancelHelperRemoval = false; //Remove the helper in the sortable instance<br>    this.instance._triggerundefined"deactivate", event, uiSortable);<br>   }<br><br>  });<br><br> },<br> drag: functionundefinedevent, ui) {<br><br>  var inst = $undefinedthis).dataundefined"draggable"), self = this;<br><br>  var checkPos = functionundefinedo) {<br>   var dyClick = this.offset.click.top, dxClick = this.offset.click.left;<br>   var helperTop = this.positionAbs.top, helperLeft = this.positionAbs.left;<br>   var itemHeight = o.height, itemWidth = o.width;<br>   var itemTop = o.top, itemLeft = o.left;<br><br>   return $.ui.isOverundefinedhelperTop + dyClick, helperLeft + dxClick, itemTop, itemLeft, itemHeight, itemWidth);<br>  };<br><br>  $.eachundefinedinst.sortables, functionundefinedi) {<br>   <br>   //Copy over some variables to allow calling the sortable's native _intersectsWith<br>   this.instance.positionAbs = inst.positionAbs;<br>   this.instance.helperProportions = inst.helperProportions;<br>   this.instance.offset.click = inst.offset.click;<br>   <br>   ifundefinedthis.instance._intersectsWithundefinedthis.instance.containerCache)) {<br><br>    //If it intersects, we use a little isOver variable and set it once, so our move-in stuff gets fired only once<br>    ifundefined!this.instance.isOver) {<br><br>     this.instance.isOver = 1;<br>     //Now we fake the start of dragging for the sortable instance,<br>     //by cloning the list group item, appending it to the sortable and using it as inst.currentItem<br>     //We can then fire the start event of the sortable with our passed browser event, and our own helper undefinedso it doesn't create a new one)<br>     this.instance.currentItem = $undefinedself).cloneundefined).appendToundefinedthis.instance.element).dataundefined"sortable-item", true);<br>     this.instance.options._helper = this.instance.options.helper; //Store helper option to later restore it<br>     this.instance.options.helper = functionundefined) { return ui.helper[0]; };<br><br>     event.target = this.instance.currentItem[0];<br>     this.instance._mouseCaptureundefinedevent, true);<br>     this.instance._mouseStartundefinedevent, true, true);<br><br>     //Because the browser event is way off the new appended portlet, we modify a couple of variables to reflect the changes<br>     this.instance.offset.click.top = inst.offset.click.top;<br>     this.instance.offset.click.left = inst.offset.click.left;<br>     this.instance.offset.parent.left -= inst.offset.parent.left - this.instance.offset.parent.left;<br>     this.instance.offset.parent.top -= inst.offset.parent.top - this.instance.offset.parent.top;<br><br>     inst._triggerundefined"toSortable", event);<br>     inst.dropped = this.instance.element; //draggable revert needs that<br>     //hack so receive/update callbacks work undefinedmostly)<br>     inst.currentItem = inst.element;<br>     this.instance.fromOutside = inst;<br><br>    }<br><br>    //Provided we did all the previous steps, we can fire the drag event of the sortable on every draggable drag, when it intersects with the sortable<br>    ifundefinedthis.instance.currentItem) this.instance._mouseDragundefinedevent);<br><br>   } else {<br><br>    //If it doesn't intersect with the sortable, and it intersected before,<br>    //we fake the drag stop of the sortable, but make sure it doesn't remove the helper by using cancelHelperRemoval<br>    ifundefinedthis.instance.isOver) {<br><br>     this.instance.isOver = 0;<br>     this.instance.cancelHelperRemoval = true;<br>     <br>     //Prevent reverting on this forced stop<br>     this.instance.options.revert = false;<br>     <br>     // The out event needs to be triggered independently<br>     this.instance._triggerundefined'out', event, this.instance._uiHashundefinedthis.instance));<br>     <br>     this.instance._mouseStopundefinedevent, true);<br>     this.instance.options.helper = this.instance.options._helper;<br><br>     //Now we remove our currentItem, the list group clone again, and the placeholder, and animate the helper back to it's original size<br>     this.instance.currentItem.removeundefined);<br>     ifundefinedthis.instance.placeholder) this.instance.placeholder.removeundefined);<br><br>     inst._triggerundefined"fromSortable", event);<br>     inst.dropped = false; //draggable revert needs that<br>    }<br><br>   };<br><br>  });<br><br> }<br>});<br><br>$.ui.plugin.addundefined"draggable", "cursor", {<br> start: functionundefinedevent, ui) {<br>  var t = $undefined'body'), o = $undefinedthis).dataundefined'draggable').options;<br>  if undefinedt.cssundefined"cursor")) o._cursor = t.cssundefined"cursor");<br>  t.cssundefined"cursor", o.cursor);<br> },<br> stop: functionundefinedevent, ui) {<br>  var o = $undefinedthis).dataundefined'draggable').options;<br>  if undefinedo._cursor) $undefined'body').cssundefined"cursor", o._cursor);<br> }<br>});<br><br>$.ui.plugin.addundefined"draggable", "iframeFix", {<br> start: functionundefinedevent, ui) {<br>  var o = $undefinedthis).dataundefined'draggable').options;<br>  $undefinedo.iframeFix === true ? "iframe" : o.iframeFix).eachundefinedfunctionundefined) {<br>   $undefined'<div class="ui-draggable-iframeFix" style="background: #fff;"></div>')<br>   .cssundefined{<br>    width: this.offsetWidth+"px", height: this.offsetHeight+"px",<br>    position: "absolute", opacity: "0.001", zIndex: 1000<br>   })<br>   .cssundefined$undefinedthis).offsetundefined))<br>   .appendToundefined"body");<br>  });<br> },<br> stop: functionundefinedevent, ui) {<br>  $undefined"div.ui-draggable-iframeFix").eachundefinedfunctionundefined) { this.parentNode.removeChildundefinedthis); }); //Remove frame helpers<br> }<br>});<br><br>$.ui.plugin.addundefined"draggable", "opacity", {<br> start: functionundefinedevent, ui) {<br>  var t = $undefinedui.helper), o = $undefinedthis).dataundefined'draggable').options;<br>  ifundefinedt.cssundefined"opacity")) o._opacity = t.cssundefined"opacity");<br>  t.cssundefined'opacity', o.opacity);<br> },<br> stop: functionundefinedevent, ui) {<br>  var o = $undefinedthis).dataundefined'draggable').options;<br>  ifundefinedo._opacity) $undefinedui.helper).cssundefined'opacity', o._opacity);<br> }<br>});<br><br>$.ui.plugin.addundefined"draggable", "scroll", {<br> start: functionundefinedevent, ui) {<br>  var i = $undefinedthis).dataundefined"draggable");<br>  ifundefinedi.scrollParent[0] != document && i.scrollParent[0].tagName != 'HTML') i.overflowOffset = i.scrollParent.offsetundefined);<br> },<br> drag: functionundefinedevent, ui) {<br><br>  var i = $undefinedthis).dataundefined"draggable"), o = i.options, scrolled = false;<br><br>  ifundefinedi.scrollParent[0] != document && i.scrollParent[0].tagName != 'HTML') {<br><br>   ifundefined!o.axis || o.axis != 'x') {<br>    ifundefinedundefinedi.overflowOffset.top + i.scrollParent[0].offsetHeight) - event.pageY < o.scrollSensitivity)<br>     i.scrollParent[0].scrollTop = scrolled = i.scrollParent[0].scrollTop + o.scrollSpeed;<br>    else ifundefinedevent.pageY - i.overflowOffset.top < o.scrollSensitivity)<br>     i.scrollParent[0].scrollTop = scrolled = i.scrollParent[0].scrollTop - o.scrollSpeed;<br>   }<br><br>   ifundefined!o.axis || o.axis != 'y') {<br>    ifundefinedundefinedi.overflowOffset.left + i.scrollParent[0].offsetWidth) - event.pageX < o.scrollSensitivity)<br>     i.scrollParent[0].scrollLeft = scrolled = i.scrollParent[0].scrollLeft + o.scrollSpeed;<br>    else ifundefinedevent.pageX - i.overflowOffset.left < o.scrollSensitivity)<br>     i.scrollParent[0].scrollLeft = scrolled = i.scrollParent[0].scrollLeft - o.scrollSpeed;<br>   }<br><br>  } else {<br><br>   ifundefined!o.axis || o.axis != 'x') {<br>    ifundefinedevent.pageY - $undefineddocument).scrollTopundefined) < o.scrollSensitivity)<br>     scrolled = $undefineddocument).scrollTopundefined$undefineddocument).scrollTopundefined) - o.scrollSpeed);<br>    else ifundefined$undefinedwindow).heightundefined) - undefinedevent.pageY - $undefineddocument).scrollTopundefined)) < o.scrollSensitivity)<br>     scrolled = $undefineddocument).scrollTopundefined$undefineddocument).scrollTopundefined) + o.scrollSpeed);<br>   }<br><br>   ifundefined!o.axis || o.axis != 'y') {<br>    ifundefinedevent.pageX - $undefineddocument).scrollLeftundefined) < o.scrollSensitivity)<br>     scrolled = $undefineddocument).scrollLeftundefined$undefineddocument).scrollLeftundefined) - o.scrollSpeed);<br>    else ifundefined$undefinedwindow).widthundefined) - undefinedevent.pageX - $undefineddocument).scrollLeftundefined)) < o.scrollSensitivity)<br>     scrolled = $undefineddocument).scrollLeftundefined$undefineddocument).scrollLeftundefined) + o.scrollSpeed);<br>   }<br><br>  }<br><br>  ifundefinedscrolled !== false && $.ui.ddmanager && !o.dropBehaviour)<br>   $.ui.ddmanager.prepareOffsetsundefinedi, event);<br><br> }<br>});<br><br>$.ui.plugin.addundefined"draggable", "snap", {<br> start: functionundefinedevent, ui) {<br><br>  var i = $undefinedthis).dataundefined"draggable"), o = i.options;<br>  i.snapElements = [];<br><br>  $undefinedo.snap.constructor != String ? undefined o.snap.items || ':dataundefineddraggable)' ) : o.snap).eachundefinedfunctionundefined) {<br>   var $t = $undefinedthis); var $o = $t.offsetundefined);<br>   ifundefinedthis != i.element[0]) i.snapElements.pushundefined{<br>    item: this,<br>    width: $t.outerWidthundefined), height: $t.outerHeightundefined),<br>    top: $o.top, left: $o.left<br>   });<br>  });<br><br> },<br> drag: functionundefinedevent, ui) {<br><br>  var inst = $undefinedthis).dataundefined"draggable"), o = inst.options;<br>  var d = o.snapTolerance;<br><br>  var x1 = ui.offset.left, x2 = x1 + inst.helperProportions.width,<br>   y1 = ui.offset.top, y2 = y1 + inst.helperProportions.height;<br><br>  for undefinedvar i = inst.snapElements.length - 1; i >= 0; i--){<br><br>   var l = inst.snapElements[i].left, r = l + inst.snapElements[i].width,<br>    t = inst.snapElements[i].top, b = t + inst.snapElements[i].height;<br><br>   //Yes, I know, this is insane ;)<br>   ifundefined!undefinedundefinedl-d < x1 && x1 < r+d && t-d < y1 && y1 < b+d) || undefinedl-d < x1 && x1 < r+d && t-d < y2 && y2 < b+d) || undefinedl-d < x2 && x2 < r+d && t-d < y1 && y1 < b+d) || undefinedl-d < x2 && x2 < r+d && t-d < y2 && y2 < b+d))) {<br>    ifundefinedinst.snapElements[i].snapping) undefinedinst.options.snap.release && inst.options.snap.release.callundefinedinst.element, event, $.extendundefinedinst._uiHashundefined), { snapItem: inst.snapElements[i].item })));<br>    inst.snapElements[i].snapping = false;<br>    continue;<br>   }<br><br>   ifundefinedo.snapMode != 'inner') {<br>    var ts = Math.absundefinedt - y2) <= d;<br>    var bs = Math.absundefinedb - y1) <= d;<br>    var ls = Math.absundefinedl - x2) <= d;<br>    var rs = Math.absundefinedr - x1) <= d;<br>    ifundefinedts) ui.position.top = inst._convertPositionToundefined"relative", { top: t - inst.helperProportions.height, left: 0 }).top - inst.margins.top;<br>    ifundefinedbs) ui.position.top = inst._convertPositionToundefined"relative", { top: b, left: 0 }).top - inst.margins.top;<br>    ifundefinedls) ui.position.left = inst._convertPositionToundefined"relative", { top: 0, left: l - inst.helperProportions.width }).left - inst.margins.left;<br>    ifundefinedrs) ui.position.left = inst._convertPositionToundefined"relative", { top: 0, left: r }).left - inst.margins.left;<br>   }<br><br>   var first = undefinedts || bs || ls || rs);<br><br>   ifundefinedo.snapMode != 'outer') {<br>    var ts = Math.absundefinedt - y1) <= d;<br>    var bs = Math.absundefinedb - y2) <= d;<br>    var ls = Math.absundefinedl - x1) <= d;<br>    var rs = Math.absundefinedr - x2) <= d;<br>    ifundefinedts) ui.position.top = inst._convertPositionToundefined"relative", { top: t, left: 0 }).top - inst.margins.top;<br>    ifundefinedbs) ui.position.top = inst._convertPositionToundefined"relative", { top: b - inst.helperProportions.height, left: 0 }).top - inst.margins.top;<br>    ifundefinedls) ui.position.left = inst._convertPositionToundefined"relative", { top: 0, left: l }).left - inst.margins.left;<br>    ifundefinedrs) ui.position.left = inst._convertPositionToundefined"relative", { top: 0, left: r - inst.helperProportions.width }).left - inst.margins.left;<br>   }<br><br>   ifundefined!inst.snapElements[i].snapping && undefinedts || bs || ls || rs || first))<br>    undefinedinst.options.snap.snap && inst.options.snap.snap.callundefinedinst.element, event, $.extendundefinedinst._uiHashundefined), { snapItem: inst.snapElements[i].item })));<br>   inst.snapElements[i].snapping = undefinedts || bs || ls || rs || first);<br><br>  };<br><br> }<br>});<br><br>$.ui.plugin.addundefined"draggable", "stack", {<br> start: functionundefinedevent, ui) {<br><br>  var o = $undefinedthis).dataundefined"draggable").options;<br><br>  var group = $.makeArrayundefined$undefinedo.stack.group)).sortundefinedfunctionundefineda,b) {<br>   return undefinedparseIntundefined$undefineda).cssundefined"zIndex"),10) || o.stack.min) - undefinedparseIntundefined$undefinedb).cssundefined"zIndex"),10) || o.stack.min);<br>  });<br><br>  $undefinedgroup).eachundefinedfunctionundefinedi) {<br>   this.style.zIndex = o.stack.min + i;<br>  });<br><br>  this[0].style.zIndex = o.stack.min + group.length;<br><br> }<br>});<br><br>$.ui.plugin.addundefined"draggable", "zIndex", {<br> start: functionundefinedevent, ui) {<br>  var t = $undefinedui.helper), o = $undefinedthis).dataundefined"draggable").options;<br>  ifundefinedt.cssundefined"zIndex")) o._zIndex = t.cssundefined"zIndex");<br>  t.cssundefined'zIndex', o.zIndex);<br> },<br> stop: functionundefinedevent, ui) {<br>  var o = $undefinedthis).dataundefined"draggable").options;<br>  ifundefinedo._zIndex) $undefinedui.helper).cssundefined'zIndex', o._zIndex);<br> }<br>});<br><br>})undefinedjQuery);<br><br>//]]><br></script><br><script type='text/javascript'><br>$undefineddocument).readyundefinedfunctionundefined){<br>$undefined".draggable").draggableundefined);<br>});<br><br></script><br><script type="text/javascript"><br>if undefinedwindow.jstiming) window.jstiming.load.tickundefined'headEnd');<br></script>
  



Press "Ctrl + A" to Select and "Ctrl + C" to Copy
5. Now Click on "Save Template"

6. Now go to Layout-->page elements and Click on 'Add a Gadget'
7. Now Select 'HTML/Javascript' and add the code given below and click save.
Blue Color is for - URL for which image is linking
Red Color is for - Image Title
Green Color is for - Image address
Note - Remember to Replace Blue, Red, Green code with your content
Demo