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(); 
    } 
});