diff --git a/src/jquery.tokeninput.js b/src/jquery.tokeninput.js index 7d5b7527..05e01d20 100644 --- 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 index da29d283..3505ff7b 100644 --- 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 index 79090613..f8fdeb75 100644 --- 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; }