improvements in drag&drop visual feedback

not there yet.
vdepizzol · Jun 12, 2011 · cf1bc77 · cf1bc77
1 parent 0436935
commit cf1bc77
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 10 deletions.
diff --git a/src/jquery.tokeninput.js b/src/jquery.tokeninput.js
@@ -49,6 +49,7 @@ var DEFAULT_CLASSES = {
     selectedToken: "token-input-selected-token",
     highlightedToken: "token-input-highlighted-token",
     draggedToken: "token-input-dragged-token",
+    draggedClone: "token-input-dragged-clone",
     dropdown: "token-input-dropdown",
     dropdownItem: "token-input-dropdown-item",
     dropdownItem2: "token-input-dropdown-item2",
@@ -588,8 +589,7 @@ $.TokenList = function (input, url_or_data_or_function, settings) {
 
             dragToken = token;
 
-            dragTimeout = window.setTimeout(function() {
-                var previous_selected_token = selected_token;
+            dragTimeout = window.setTimeout(function(e) {
 
                 if(selected_token == token) {
                     return;
@@ -601,7 +601,10 @@ $.TokenList = function (input, url_or_data_or_function, settings) {
 
                 select_token(token);
 
-                $(token).clone().appendTo('body').addClass(settings.classes.draggedToken);
+                var position = $(token).position();
+
+                $(token).clone().appendTo('body').addClass(settings.classes.draggedClone).css({'top': position.top, 'left': position.left});
+                token.addClass(settings.classes.draggedToken);
 
                 dragging = true;
 
@@ -615,14 +618,15 @@ $.TokenList = function (input, url_or_data_or_function, settings) {
                     return;
                 }
 
-                $('li.'+settings.classes.draggedToken).remove();
+                dragging = false;
+
+                $('li.'+settings.classes.draggedClone).remove();
+                $('li.'+settings.classes.draggedToken).removeClass(settings.classes.draggedToken);
 
                 if(selected_token) {
                     deselect_token($(selected_token), POSITION.END);
                 }
 
-                dragging = false;
-
                 if(dragDestination) {
                     move_token(token, dragDestination);
                     reindex_results();
@@ -658,7 +662,7 @@ $.TokenList = function (input, url_or_data_or_function, settings) {
         $('body').mousemove(function(e) {
             if(!dragging) return;
 
-            $('li.'+settings.classes.draggedToken).css({'top': e.pageY, 'left': e.pageX});
+            $('li.'+settings.classes.draggedClone).css({'top': e.pageY, 'left': e.pageX});
         });
     }
 
@@ -677,6 +681,7 @@ $.TokenList = function (input, url_or_data_or_function, settings) {
         index_tokens();
         first = $.data(first.get(0), "tokeninput");
         last = $.data(last.get(0), "tokeninput");
+        if(!first || !last) return;
         return last.index > first.index 
     }
 

diff --git a/styles/token-input-facebook.css b/styles/token-input-facebook.css
@@ -87,15 +87,18 @@ li.token-input-input-token-facebook {
     list-style-type: none;
 }
 li.token-input-dragged-token-facebook {
-    opacity: 0.7;
+    opacity: 0;
+}
+li.token-input-dragged-clone-facebook {
     position: absolute;
     margin: 5px 0 0 5px;
     padding: 2px 6px;
     list-style: none;
     font-size: 11px;
     font-family: Verdana;
+    cursor: move;
 }
-li.token-input-dragged-token-facebook span {
+li.token-input-dragged-clone-facebook span {
     display: none;
 }
 

diff --git a/styles/token-input.css b/styles/token-input.css
@@ -62,13 +62,16 @@ li.token-input-selected-token span {
     color: #bbb;
 }
 li.token-input-dragged-token {
+    opacity: 0;
+}
+li.token-input-dragged-clone {
     opacity: 0.5;
     position: absolute;
     margin: 5px 0 0 5px;
     font-size: 12px;
     font-family: Verdana;
 }
-li.token-input-dragged-token span {
+li.token-input-dragged-clone span {
     display: none;
 }