jquery可拖动，增加了按键功能

Question

我想从jQueryUI实现"draggable“控件。

当用户用鼠标拖动图标时，他可以将该图标放在某个地方(例如，在图像上)。

我还想要有高级功能-当用户按下一个键，一个图标被附加到鼠标上，与鼠标点击，图标可以被放置(在相同的地方，作为一个图标被拖动)。

类似的功能已经在Silverlight游戏机器人中实现：http://robozzle.com/

显然，我将使用这个：http://code.google.com/p/js-hotkeys/，但我的问题是：

如何以编程方式创建jQuery可拖动对象并将其附加到鼠标光标？

即不需要用鼠标实际拖动它。

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