{"id":2657,"date":"2012-01-20T00:40:27","date_gmt":"2012-01-19T19:10:27","guid":{"rendered":"http:\/\/JitendraZaa.com\/blog\/?p=2657"},"modified":"2012-01-20T00:40:27","modified_gmt":"2012-01-19T19:10:27","slug":"create-simple-drag-and-drop-widget-like-igoogle-using-jquery","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/web\/create-simple-drag-and-drop-widget-like-igoogle-using-jquery\/","title":{"rendered":"Create Simple Drag and Drop Widget like iGoogle using JQuery"},"content":{"rendered":"

After reading this post you will come to know that how easy its to create the Drag and Drop functionality using JQuery.<\/p>\n

To run this example you will need two javascript libraries as follow:<\/p>\n

    \n
  1. JQuery<\/a><\/li>\n
  2. JQueryUI<\/a><\/li>\n<\/ol>\n
    \"jQuery<\/a>
    jQuery Drag and Drop Widgets<\/figcaption><\/figure>\n

    <\/p>\n

    You can see the complete working demo here<\/a><\/h3>\n

    Lets say you want to create the widget in two columns, so first create two DIV tags as shown below:<\/p>\n

    \n<div id="column1" class="column">\n<!-- Widgets code here -->\n<\/div>\n\n<div id="column2"  class="column">\n<!-- Widgets code here -->\n<\/div>\n<\/pre>\n
    We are assuming that we can drag the elements from column1 to column2 and vice verse.<\/p>\n
    Now we will create the actual element which can be drag-gable.<\/p>\n
    \n<div id="column1" class="column">\n\t<div class="dragbox" id="item1" >\n\t\t<h2>Handle 1\n\t\t  <a href="#" class="delete opIcons"> <\/a>\n\t\t  <a href="#" class="maxmin opIcons"> <\/a>\n\n\t\t<\/h2>\n\t\t<div class="dragbox-content" >\n\t\t\t<!-- Panel Content Here -->\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n<div id="column2"  class="column">\n\t<div class="dragbox" id="item2" >\n\t\t<h2>Handle 2\n\t\t  <a href="#" class="delete opIcons"> <\/a>\n\t\t  <a href="#" class="maxmin opIcons"> <\/a>\n\n\t\t<\/h2>\n\t\t<div class="dragbox-content" >\n\t\t\t<!-- Panel Content Here -->\n\t\t<\/div>\n\t<\/div>\n<\/div>\n<\/pre>\n
    As you can see <h2> tag is used to create the heading and there are two <a> (anchor) tags, one for delete and one for toggle.<\/p>\n
    Now its time to write the JQuery code to drag and drop the <div> tag with class=”dragbox”<\/strong><\/p>\n
    \n$(\nfunction(){\n\t$('a.maxmin').click(\n\tfunction(){\n\t\t$(this).parent().siblings('.dragbox-content').toggle();\n\t});\n\n\t$('a.delete').click(\n\tfunction(){\n\t\tvar sel = confirm('do you want to delete the widget?');\n\t\tif(sel)\n\t\t{\n\t\t\t\/\/del code here\n\t\t}\n\t}\n\t);\n\n\t$('.column').sortable({\n\tconnectWith: '.column',\n\thandle: 'h2',\n\tcursor: 'move',\n\tplaceholder: 'placeholder',\n\tforcePlaceholderSize: true,\n\topacity: 0.4,\n\tstop: function(event, ui)\n\t\t{\n\t\t\t$(ui.item).find('h2').click();\n\t\t\tvar sortorder='';\n\n\t\t\t$('.column').each(function(){\n\t\t\t\tvar itemorder=$(this).sortable('toArray');\n\t\t\t\tvar columnId=$(this).attr('id');\n\t\t\t\tsortorder+=columnId+'='+itemorder.toString()+'&';\n\t\t\t});\n\t\t\tsortorder = sortorder.substring(0, sortorder.length - 1)\n\t\t\talert('SortOrder: '+sortorder);\n\n\t\t}\n\t}).disableSelection();\n});\n<\/pre>\n
    As you can see, on dom ready event using $() – which is equal to “$.ready()”, we have written the code like $(‘.column’).sortable(…) which will perform the drag and drop functionality. the “sortable” functionality is used to save the state of the widget in database so that next time you can load the widget in order which they are previously for this you will need to do some extra code here. The sort result is displayed using alert after element drop.<\/p>\n
    For the delete action, i have written the comment where server request can be called using Ajax to delete the widget. With the help of below CSS this example will be completed with nice look and feel.<\/p>\n
    \n.column{\n\twidth:49%;\n\tmargin-right:.5%;\n\tmin-height:300px;\n\tbackground:#fff;\n\tfloat:left;\n}\n.column .dragbox{\n\tmargin:5px 2px  20px;\n\tbackground:#fff;\n\tposition:"relative";\n\tborder:1px solid #946553;\n\t-moz-border-radius:5px;\n\t-webkit-border-radius:5px;\n}\n.column .dragbox h2{\n\tmargin:0;\n\tfont-size:12px;\n\tbackground:#946553;\n\tcolor:#fff;\n\tborder-bottom:1px solid #946553;\n\tfont-family:Verdana;\n\tcursor:move;\n\tpadding:5px;\n}\n\n.dragbox-content{\n\tbackground:#fff;\n\tmin-height:100px; margin:5px;\n\tfont-family:'Lucida Grande', Verdana; font-size:0.8em; line-height:1.5em;\n}\n.column  .placeholder{\n\tbackground: #EED5B7;\n\tborder:1px dashed #946553;\n}\n\n.opIcons\n{\nbackground-image: url('iconSpirite.gif')!important;\nbackground-repeat: no-repeat;\nfloat:right;\nheight:13px;\nwidth:13px;\nmargin:0px 2px;\n}\n\n.maxmin\n{\n\tbackground-position:-26px 1px;\n}\n\n.delete\n{\n\tbackground-position:-269px center;\n\tpadding-top:1px;\n}\n<\/pre>\n
    You can see the complete working demo here<\/a><\/h3>\n","protected":false},"excerpt":{"rendered":"
    Live Demo with source code on creating Simple Drag and Drop Widget using JQuery plugin like iGoogle <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[26],"tags":[134],"class_list":["post-2657","post","type-post","status-publish","format-standard","hentry","category-web","tag-jquery"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":65,"url":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/web\/highlight-current-field-using-jquery\/","url_meta":{"origin":2657,"position":0},"title":"Highlight Current field using JQuery","author":"Jitendra","date":"May 10, 2010","format":false,"excerpt":"Write below HTML code : This will create two text boxes. [sourcecode lang=\"css\"]