"drag and drob task"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html lang='en' class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/cliffpyles/pen/fxKDu?limit=all&page=26&q=draggable" /> <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script> <style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Lato); body { background-color: #eaeaea; color: #333; font-family: Lato; -webkit-font-smoothing: antialiased; } [contenteditable="true"]:focus { outline: 1px solid black; } h1 { margin: 20px; text-align: left; color: #DA4453; } h2 { text-align: right; line-height: 1; margin: 0 0 10px 0; padding: 0; } h3 { line-height: 1.5; margin: 0; padding: 0; color: #ED5565; } h4 { line-height: 1; margin: 0; padding: 0; text-align: left; color: #ED5565; } a { color: #e8273b; transition: all 0.3s ease-in-out; } a:hover { color: #c71528; text-shadow: 0px 0px 12px #ED5565; } #page { width: 960px; margin: 0px auto; } #users { float: left; margin: 0 0 0 20px; } #users h3 { text-align: right; } #completed-tasks { float: left; width: 23%; padding: 0px; overflow-x: hidden; } #completed-tasks.open { width: 23%; } #completed-tasks .actions { display: none; } #completed-tasks .task { border-width: 0px 0px 1px 0px; } #completed-tasks .task p { text-decoration: line-through; } .user-panel { display: inline-block; padding: 8px; width: 200px; vertical-align: top; background-color: #fff; border-radius: 3px; } .user-name.over ~ .task-list { border: 3px dashed #dadada; } .toolbar { text-align: right; line-height: 30px; padding: 0px 6px; display: none; } .task-list { position: relative; margin: 4px 0px 0px 0px; } .task { position: relative; background-color: #eaeaea; text-align: left; padding: 0px 0px 0px 4px; margin: 0px 0px 1px 0px; border: 1px solid #dadada; border-width: 1px 1px 0px 1px; } .task:last-child { border-width: 1px; } .task > p { color: #808080; margin: 0; padding: 0; line-height: 30px; display: inline-block; width: 90%; vertical-align: top; } .actions { position: absolute; display: inline-block; padding: 0px; margin: 0px -200px 0 0; width: 19px; height: 22px; z-index: 10; overflow: hidden; background-color: #fff; opacity: 0.5; transition: all 0.75s ease-in-out; } .actions:hover { width: 150px; opacity: 1; } .actions a { padding: 0px 10px; } .task.over { border-top: 3px dashed #dadada; } </style></head><body> <!-- JJ --> <div id="page"> <div id="workarea"> <h1>Drag and Drop Tasks</h1> <div id="completed-tasks"> <h3> <em class="icon-ok icon-large"></em> Completed Tasks </h3> </div><!-- #completed-tasks --> <div id="users" class="user-panels"> <div id="user-1" class="user-panel"> <h4 class="user-name">John Doe</h4> <div class="toolbar"> <a href="#" class="add-task icon icon-plus"></a> </div> <div class="task-list"> <div id="task-1" class="task"> <p>task 1</p> <div class="actions"> <a href="#" class="icon-caret-right"></a> <a href="#" class="icon-ok"></a> <a href="#" class="icon-pencil"></a> <a href="#" class="icon-trash"></a> </div> </div> <div id="task-2" class="task"> <p>task 2</p> <div class="actions"> <a href="#" class="icon-caret-right"></a> <a href="#" class="icon-ok"></a> <a href="#" class="icon-pencil"></a> <a href="#" class="icon-trash"></a> </div> </div> <div id="task-3" class="task"> <p>task 3</p> <div class="actions"> <a href="#" class="icon-caret-right"></a> <a href="#" class="icon-ok"></a> <a href="#" class="icon-pencil"></a> <a href="#" class="icon-trash"></a> </div> </div> <div id="task-4" class="task"> <p>task 4</p> <div class="actions"> <a href="#" class="icon-caret-right"></a> <a href="#" class="icon-ok"></a> <a href="#" class="icon-pencil"></a> <a href="#" class="icon-trash"></a> </div> </div> </div> </div> <div id="user-2" class="user-panel"> <h4 class="user-name">Jane Doe</h4> <div class="toolbar"> <a href="#" class="add-task icon icon-plus"></a> </div> <div class="task-list"> <div id="task-5" class="task"> <p>task 5</p> <div class="actions"> <a href="#" class="icon-caret-right"></a> <a href="#" class="icon-ok"></a> <a href="#" class="icon-pencil"></a> <a href="#" class="icon-trash"></a> </div> </div> <div id="task-6" class="task"> <p>task 6</p> <div class="actions"> <a href="#" class="icon-caret-right"></a> <a href="#" class="icon-ok"></a> <a href="#" class="icon-pencil"></a> <a href="#" class="icon-trash"></a> </div> </div> <div id="task-7" class="task"> <p>task 7</p> <div class="actions"> <a href="#" class="icon-caret-right"></a> <a href="#" class="icon-ok"></a> <a href="#" class="icon-pencil"></a> <a href="#" class="icon-trash"></a> </div> </div> <div id="task-8" class="task"> <p>task 8</p> <div class="actions"> <a href="#" class="icon-caret-right"></a> <a href="#" class="icon-ok"></a> <a href="#" class="icon-pencil"></a> <a href="#" class="icon-trash"></a> </div> </div> </div> </div> <div id="user-3" class="user-panel"> <h4 class="user-name">Suzy Q</h4> <div class="toolbar"> <a href="#" class="add-task icon icon-plus"></a> </div> <div class="task-list"> <div id="task-9" class="task"> <p>task 9</p> <div class="actions"> <a href="#" class="icon-caret-right"></a> <a href="#" class="icon-ok"></a> <a href="#" class="icon-pencil"></a> <a href="#" class="icon-trash"></a> </div> </div> <div id="task-10" class="task"> <p>task 10</p> <div class="actions"> <a href="#" class="icon-caret-right"></a> <a href="#" class="icon-ok"></a> <a href="#" class="icon-pencil"></a> <a href="#" class="icon-trash"></a> </div> </div> <div id="task-11" class="task"> <p>task 11</p> <div class="actions"> <a href="#" class="icon-caret-right"></a> <a href="#" class="icon-ok"></a> <a href="#" class="icon-pencil"></a> <a href="#" class="icon-trash"></a> </div> </div> <div id="task-12" class="task"> <p>task 12</p> <div class="actions"> <a href="#" class="icon-caret-right"></a> <a href="#" class="icon-ok"></a> <a href="#" class="icon-pencil"></a> <a href="#" class="icon-trash"></a> </div> </div> </div> </div> </div><!-- #users --> </div><!-- #workarea --> </div><!-- #page --> <!-- SDG --> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script >;(function ( $, window, undefined ) { var pluginName = 'dragDrop', document = window.document, defaults = { draggableSelector: ".draggable", droppableSelector: ".droppable", appendToSelector: false }; function Plugin( element, options ) { this.element = element; this.options = $.extend( {}, defaults, options) ; this._defaults = defaults; this._name = pluginName; this.init(); } Plugin.prototype.init = function () { var droppables = $(this.element).find(this.options.droppableSelector); var draggables = $(this.element).find(this.options.draggableSelector).attr("draggable", "true"); if(this.options.appendToSelector){ var appendables = $(this.options.appendToSelector); appendables.on({ 'dragenter': function(ev){ ev.preventDefault(); return true; }, 'drop': function(ev){ var data = ev.originalEvent.dataTransfer.getData("Text"); var draggedEl = document.getElementById(data); var destinationEl = $(ev.target); destinationEl = destinationEl.closest(appendables.selector).siblings(droppables.selector).append(draggedEl); $('.active').removeClass('active'); $('.over').removeClass('over'); ev.stopPropagation(); return false; }, 'dragover': function(ev){ ev.preventDefault(); $(ev.target).closest(appendables.selector).addClass('over'); return true; }, 'dragleave': function(ev){ ev.preventDefault(); $(ev.target).closest(appendables.selector).removeClass('over'); return true; } }); } droppables.on({ 'mouseup': function(ev){ $('.active').removeClass('active'); return true; }, 'dragenter': function(ev){ ev.preventDefault(); return true; }, 'drop': function(ev){ var data = ev.originalEvent.dataTransfer.getData("Text"); var draggedEl = document.getElementById(data); var destinationEl = $(ev.target); destinationEl.closest(draggables.selector).before(draggedEl); $('.active').removeClass('active'); $('.over').removeClass('over'); ev.stopPropagation(); return false; }, 'dragover': function(ev){ ev.preventDefault(); $(ev.target).closest(draggables.selector).addClass('over'); return true; }, 'dragleave': function(ev){ ev.preventDefault(); $(ev.target).closest(draggables.selector).removeClass('over'); return true; } }); draggables.on({ 'mousedown': function(ev){ $(ev.target).closest(draggables.selector).addClass('active'); return true; }, 'mouseup': function(ev){ $('.active').removeClass('active'); return true; }, 'dragstart': function(ev){ ev.originalEvent.dataTransfer.effectAllowed='move'; ev.originalEvent.dataTransfer.setData("Text", ev.target.getAttribute('id')); ev.originalEvent.dataTransfer.setDragImage(ev.target,100,20); return true; }, 'dragend': function(ev){ return true; } }); }; // A really lightweight plugin wrapper around the constructor, // preventing against multiple instantiations $.fn[pluginName] = function ( options ) { return this.each(function () { if (!$.data(this, 'plugin_' + pluginName)) { $.data(this, 'plugin_' + pluginName, new Plugin( this, options )); } }); } }(jQuery, window)); $(document).ready(function(){ $("#users").dragDrop({ draggableSelector: ".task", droppableSelector: ".task-list", appendToSelector: ".user-name" }); $("a.icon-trash").on("click", function(){ $(this).closest(".task").remove(); }); $("a.icon-ok").on("click", function(){ $(this).closest(".task").appendTo("#completed-tasks"); $("#completed-tasks").addClass('open'); }); $("a.icon-pencil").on("click", function(){ var task = $(this).closest(".task"); task.attr("draggable", "false"); task.find("p").attr("contenteditable", "true").on({ "keypress": function(ev){ if(ev.keyCode == 13) { ev.preventDefault(); $(this).attr("contenteditable", "false"); task.attr("draggable", "true"); } }, "focusout": function(ev){ $(this).attr("contenteditable", "false"); task.attr("draggable", "true"); } }).focus(); }); }); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: