Question

我想从jQueryUI实现“draggable”控件当用户使用鼠标拖动图标时，他可以将该图标放在某处（例如图像上）。

我还希望拥有高级功能 - 当用户按下某个键时，鼠标上会附加一个图标，只需单击鼠标，就可以删除该图标（与拖动的图标位于同一位置）。 / p>

Silverlight游戏Robozzle中实现了类似的功能：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();
    }
});

jquery draggable，增加了按键功能

1 个答案: