jquery拖動與添加按鍵功能

Question

我想從jQueryUI實現「可拖動」控件。
當用戶用鼠標拖動一個圖標時，他可以將該圖標放在某處（例如在圖像上）。

我還希望具有高級功能 - 當用戶按下某個鍵時，圖標被附加到鼠標上，並且通過單擊鼠標，該圖標可以被放下（與被拖動的圖標位於相同的位置）。

類似的功能已經在Silverlight的遊戲Robozzle得到落實：http://robozzle.com/

很顯然，我會使用這樣的：http://code.google.com/p/js-hotkeys/，但我的問題是：
如何以編程方式創建和附加一個jQuery可拖動對象鼠標光標？
I.e.而實際上並沒有用鼠標拖動它。

Answer 1

要獲得大部分功能，您甚至不需要jQuery UI或任何插件。看看我的演示在這裏：http://jsfiddle.net/cJzeP/2/

如果你想繼續拖動的圖標，而不是我的點擊解決方案，你可以很容易地結合這兩個。如果需要，請參閱代碼中的註釋以獲取更多解釋。

HTML：

<div id="iconA" class="icon">A</div> 
<div id="iconB" class="icon">B</div> 
<div id="iconC" class="icon">C</div> 

<div class="drop">Drop stuff here: </div> 

CSS：

.icon { display:inline-block; margin:5px; background-color:whitesmoke; border:1px solid silver; width:20px; height:20px; text-align:center; } 

.drop { padding:20px; border:1px solid blue; } 

的Javascript：

// The dragged element wrapped in a jQuery object or null 
var $dragHelper = null; 

// The last known mouse position The keypress event doesn't 
// send the position through, we need this for the hotkey 
// activation so we can show the icon next to the cursor. 
var lastX = 0; 
var lastY = 0; 

// Start dragging the element with the passed id 
function StartDrag(id){ 
    // Clone the element, make it absolutely positioned and 
    // append it to the body. 
    $dragHelper = $('#' + id).clone().css('position', 'absolute').appendTo('body'); 

    // Fire the dragging event to update the helper's position 
    Dragging(); 

    // If the user clicks anything outside the drop area, 
    // stop dragging. 
    $(document).click(StopDrag); 
} 

function StopDrag(){ 
    // Remove the helper from the DOM and clear the variable. 
    $dragHelper.remove(); 
    $dragHelper = null; 

    // Unbind the document click event which is now useless. 
    $(document).unbind('click', StopDrag); 
} 

// Fires on mousemove and updates element position 
function Dragging(e){ 
    // Only update last known mouse position if an event object 
    // was passed through (mousemove event). 
    if(e){ 
     lastX = e.pageX; 
     lastY = e.pageY; 
    } 

    // If an element is being dragged, update the helper's position. 
    if($dragHelper) 
     $dragHelper.css({ top: lastY, left: lastX }); 
} 

// What happens when a key is pressed? 
$(document).keypress(function(e){ 
    var ch = String.fromCharCode(e.which).toLowerCase(); 
    switch(ch){ 
     case 'a': 
      StartDrag('iconA'); 
      break; 
     case 'b': 
      StartDrag('iconB'); 
      break; 
     case 'c': 
      StartDrag('iconC'); 
      break; 
    } 
}); 

// Bind the document mousemove event as we need to update our last 
// known mouse coordinates constantly for the keypress event. 
$(document).mousemove(Dragging); 

// Make the icons clickable 
$('.icon').click(function(e){ 
    // Start dragging this icon if it's clicked 
    StartDrag($(this).attr('id')); 

    // We need to stop event bubbling as it would straight away 
    // trigger a click on the document, which stops dragging. 
    e.stopPropagation(); 
}); 

// Make our drop area clickable 
$('.drop').click(function(){ 
    // Only do something is an element is being dragged 
    if($dragHelper){ 
     // Stuff to do when an element is dropped goes here. 

     // For the sake of this example, we just clone the helper 
     // and append it to our drop container. 
     $dragHelper.clone().css({ 
      position: 'relative', 
      top: '0px', 
      left: '0px' 
     }).appendTo(this); 

     // Stop dragging if an element was successfully dropped. 
     StopDrag(); 
    } 
});