Drag&Drop recipients emails on compose screen.

dev/Styles/_InputosaurusFix.less

@@ -17,6 +17,11 @@
 		padding: 2px 15px 2px 5px;
 		margin: 2px 2px 2px;
 		color: #555;
+		z-index: 100;
+
+		&.ui-draggable.ui-draggable-dragging {
+			z-index: 101;
+		}
 
 		position: relative;
 

rainloop/v/0.0.0/app/libraries/RainLoop/Service.php

@@ -171,6 +171,7 @@ class Service
 			{
 				$sJsBoot = \file_get_contents(APP_VERSION_ROOT_PATH.'static/js/boot.js');
 				$sResult = \strtr(\file_get_contents(APP_VERSION_ROOT_PATH.'app/templates/Index.html'), array(
+					'{{BaseRandHash}}' => \md5(\rand(1000, 9000).\microtime(true)),
 					'{{BaseAppDataScriptLink}}' => ($bAdmin ? APP_INDEX_FILE.'?/AdminAppData/' : APP_INDEX_FILE.'?/AppData/'),
 					'{{BaseAppIndexFile}}' => APP_INDEX_FILE,
 					'{{BaseAppFaviconIcoFile}}' => $aData['FaviconIcoLink'],

rainloop/v/0.0.0/app/libraries/RainLoop/ServiceActions.php

@@ -884,7 +884,7 @@ class ServiceActions
 		@\header('Content-Type: application/javascript; charset=utf-8');
 		@\header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
 		@\header('Last-Modified: '.\gmdate('D, d M Y H:i:s').' GMT');
-		@\header('Cache-Control: no-store, no-cache, must-revalidate');
+		@\header('Cache-Control: no-store, no-cache, must-revalidate, max-age=0');
 		@\header('Cache-Control: post-check=0, pre-check=0', false);
 		@\header('Pragma: no-cache');
 

rainloop/v/0.0.0/app/templates/Index.html

@@ -30,7 +30,7 @@
 		<link type="text/css" rel="stylesheet" id="rlThemeLink" />
 		<script type="text/javascript">{{BaseAppBootScriptSource}}</script>
 		<script type="text/javascript">
-			__fIncludeScr('{{BaseAppDataScriptLink}}' + (window.__rlah ? window.__rlah() || '0' : '0') + '/');
+			__fIncludeScr('{{BaseAppDataScriptLink}}' + (window.__rlah ? window.__rlah() || '0' : '0') + '/{{BaseRandHash}}/');
 		</script>
 		<script type="text/javascript">
 			if (window.rainloopAppData && window.rainloopAppData['NewThemeLink']) {

rainloop/v/0.0.0/static/css/app.css

@@ -5626,8 +5626,12 @@ html.no-rgba .modal {
   padding: 2px 15px 2px 5px;
   margin: 2px 2px 2px;
   color: #555;
+  z-index: 100;
   position: relative;
 }
+.inputosaurus-container li.ui-draggable.ui-draggable-dragging {
+  z-index: 101;
+}
 .inputosaurus-container li a {
   color: #999;
   font-size: 12px;

vendors/inputosaurus/inputosaurus.js

@@ -74,6 +74,21 @@
 
 			// Create the elements
 			els.ul = $('<ul class="inputosaurus-container"></ul>');
+			els.ul.droppable({
+				'drop': function(event, ui) {
+					
+					ui.draggable.addClass('inputosaurus-dropped');
+					els.input.val(ui.draggable.data('inputosaurus-value'));
+
+					if (ui.draggable.__widget)
+					{
+						ui.draggable.__widget._removeDraggedTag(ui.draggable);
+					}
+
+					widget.parseInput();
+				}
+			});
+
 			els.input = $('<input type="email" />');
 			els.inputCont = $('<li class="inputosaurus-input inputosaurus-required"></li>');
 			els.origInputCont = $('<li class="inputosaurus-input-hidden inputosaurus-required"></li>');
@@ -109,10 +124,6 @@
 			}
 
 			this._instAutocomplete();
-
-//			els.ul.sortable({
-//				'connectWith': '.inputosaurus-container.ui-sortable'
-//			});
 		},
 
 		_instAutocomplete : function() {
@@ -475,8 +486,23 @@
 		// @className optional className for <li>
 		_createTag : function(name, key, obj) {
 			if (name !== undefined && obj) {
-				return $('<li data-inputosaurus="' + key + '" title="' + obj.toLine(false, false, true) +
+				var 
-					'"><a href="javascript:void(0);" class="ficon">&#x2716;</a><span>' + obj.toLine(true, false, true) + '</span></li>');
+					widget = this,
+					$li = $('<li data-inputosaurus="' + key + '" title="' + obj.toLine(false, false, true) +
+						'"><a href="javascript:void(0);" class="ficon">&#x2716;</a><span>' +
+						obj.toLine(true, false, true) + '</span></li>')
+				;
+				
+				$li.data('inputosaurus-value', obj.toLine(false, false, false));
+				$li.draggable({
+					'revert': 'invalid',
+					'revertDuration': 200,
+					'start': function(event, ui) {
+						ui.helper.__widget = widget;
+					}
+				});
+
+				return $li;
 			}
 		},
 
@@ -513,6 +539,29 @@
 			}, 100);
 		},
 
+		_removeDraggedTag : function ($li) {
+			var
+				key = $li.data('inputosaurus'),
+				widget = this,
+				indexFound = false
+			;
+
+			$.each(widget._chosenValues, function(k,v) {
+				if (key === v.key) {
+
+					indexFound = k;
+				}
+			});
+
+			if (false !== indexFound)
+			{
+				widget._chosenValues.splice(indexFound, 1);
+				widget._setValue(widget._buildValue());
+			}
+
+			$li.remove();
+		},
+
 		focus : function () {
 			this.elements.input.focus();
 		},