动态图像附加到鼠标悬停下拉

Question

我正在尝试将图像动态附加到 mousemove，然后将其拖放到 div 或 .就像张贴笔记一样。

让我再解释一下。完成文本输入后，点击提交。该框将消失，便利贴图像将附加到鼠标并放在 div 中的任何位置。

    Function dataInputfn () {
    $('#dataInput').fadeIn();   
}

$('#submitTest').click(function(){
    $ ('#dataInput'). Fadeout ();
    $('<div id="NoteNew" class="dragNote"><img src="image.jpg" width="60px"/></div>').appendTo($('#div'));
    //Cursor:url(images/image0.jpg);
    noteDragFunc();
    });

Function noteDragFunc () {
    $( "#NoteNew" ).draggable({ revert: "invalid", stack: "#NoteNew"});
    $( "#chart" ).droppable({
    drop: function( event, ui ) {
        var coord = ui. draggable. position ();
        alert (coord. top);
        btnDrop = true;
    }

    });
}

我需要将此图像附加到鼠标并放在任何地方，而不是附加到潜水。

Answer 1

只是调用draggable() 不会真正将您的元素附加到鼠标的位置。

另外，如果您正在监听click 事件，那么当您触发noteDragFunc 函数时，鼠标按钮已经“向上”。

如果您将事件更改为.mousedown()，您尝试做的事情可能会奏效，但我不会指望它。用户仍然需要实际点击 NewNote div。

您可能需要使用可拖动以外的其他东西。