LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Drag and Drop Tasks

Completed Tasks

John Doe

task 1

task 2

task 3

task 4

Jane Doe

task 5

task 6

task 7

task 8

Suzy Q

task 9

task 10

task 11

task 12

CSS
@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;
}
JS
;(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();
  });
});
Host Instantly Drag and Drop Website Builder

 

Description

A drag and drop UI for group task management.
Term
Mon, 11/27/2017 - 21:40

Related Codes

Pen ID
Pen ID
Pen ID