Fixed drag and drop

resources/css/app.css

@@ -459,18 +459,18 @@ div#screen canvas#processcanvas {
 }
 
 @-webkit-keyframes pulse {
-	0% {opacity: 0;color: #000;}
-	25% {opacity: 0.25;}
+	0% {opacity: 1;color: #fff;}
+	25% {opacity: 0.75;}
 	50% {opacity: 0.50;}
-	75% {opacity: 0.75;}
-	100% {opacity: 1;color: #fff;}
+	75% {opacity: 0.25;}
+	100% {opacity: 0;color: #999;}
 }
 
 .droppable {
-	-webkit-animation: pulse 1s infinite alternate;
+	/*-webkit-animation: pulse 1s infinite alternate;
 	-moz-animation: pulse 1s infinite alternate;
 	opacity: 0;
-	color: #FFF;
+	color: #FFF;*/
 	background-color: #4966B1;/* Old browsers */
 	background: -moz-linear-gradient(top, #6086e5 0%, #6086e5 39%, #4966b1 100%); /* FF3.6+ */
 	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6086e5), color-stop(39%,#6086e5), color-stop(100%,#4966b1)); /* Chrome,Safari4+ */
@@ -500,3 +500,23 @@ div#screen canvas#processcanvas {
 	-moz-animation: none;
 	opacity: 1;
 }
+
+div.drag-table-item table tr.selected td {
+	padding-left: 5px;
+	padding-right: 5px;
+}
+
+.droppable-hover {
+	-webkit-animation: pulse 1s infinite alternate;
+	-moz-animation: pulse 1s infinite alternate;
+	opacity: 0;
+	color: #FFF;
+	background-color: #4966B1;/* Old browsers */
+	background: -moz-linear-gradient(top, #6086e5 0%, #6086e5 39%, #4966b1 100%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6086e5), color-stop(39%,#6086e5), color-stop(100%,#4966b1)); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(top, #6086e5 0%,#6086e5 39%,#4966b1 100%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(top, #6086e5 0%,#6086e5 39%,#4966b1 100%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(top, #6086e5 0%,#6086e5 39%,#4966b1 100%); /* IE10+ */
+	background: linear-gradient(to bottom, #6086e5 0%,#6086e5 39%,#4966b1 100%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6086e5', endColorstr='#4966b1',GradientType=0 ); /* IE6-9 */
+}

resources/js/views/list.js

@@ -359,10 +359,13 @@ console.log(parentWidth, that.$el.innerWidth(), parentHeight, that.$el, parentEl
 				, fnCreatedRow: function(nRow, aData, iDataIndex) {
 					if (that.options.type !== "playlist") {
 						$(nRow).draggable({
-							scope:			"list-item"
-							, cursor:		"move"
-							, revert:		"invalid"
-							, containment:	"window"
+							scope:				"list-item"
+							, stack:			"droppable"
+							, cursor:			"copy"
+							, revert:			"invalid"
+							, containment:		"window"
+							, revertDuration:	200
+							, scroll:			false
 
 							, start: function(event, ui) {
 								$(this).fadeTo("fast", 0.5);
@@ -379,7 +382,7 @@ console.log(parentWidth, that.$el.innerWidth(), parentHeight, that.$el, parentEl
 											$(this)
 											.closest("tr")
 											.clone()
-											.css($(this).getStyleObject())
+											//.css($(this).getStyleObject())
 											.addClass("selected")
 										)
 										.parent()

resources/js/views/sidebar.js

@@ -90,13 +90,13 @@ _
 					$(event.target).parents("ul:first").find("> li:first-child").addClass("selected");
 				}, 10);
 			});
-/*
-$(TableTools.fnGetInstance("DataTables_Table_0").fnGetSelected()).draggable({scope:		"list-item",helper: function () { return $('<div class="drag-table-item"><table></table></div>').find('table').append($(event.target).closest('tr').clone()).end().insertBefore("body > .ui-layout-west").appendTo("body");}});
- */
+
 			this.$el.find("> ul > li:first > span").droppable({
 				activeClass:	"droppable"
+				, hoverClass:	"droppable-hover"
 				, scope:		"list-item"
-				, tolerance:	"touch" // We really need this cause our items are much bigger than the droppable
+				, tolerance:	"touch" // We really need this cause our items
+										// are much bigger than the droppable
 				, drop:			that._addPlaylistItem
 			});
 		}