当有东西跟随光标时检测鼠标向上

Detect MouseUp while something is following the cursor

本文关键字：检测 鼠标 光标 跟随      更新时间：2023-09-26

我一直在开发在线文件系统，我希望用户能够将文件拖放到新位置。我真的不喜欢默认的拖放视觉效果，所以我没有使用传统的方法。这就是我到目前为止所拥有的。

这段代码在一个.php文件中，该文件通过jQuery加载到主页上

    <td draggable = "true" ondragstart="dragFolder(event, '''.$folderId.''', '''.$folderName.''')">
      <div class = "single-folder" onMouseUp = "folderDropUp(event, '''.$folderId.''');">
        <div class = "single-folder-name" id = "single-folder-name-'.$folderId.'">
          <span id = "single-folder-rename-'.$folderId.'" class = "rename-folder-hover">
            '.$folderName.'
          </span>
        </div>
      </div>
    </td>

这是我从"ondragstart"中被解雇的dragFolder函数。

function dragFolder(e, folderId, folderName) {
    var posX, posY, clicked, isDown = false;
    var newFolder;
    document.getElementById("folder_drag_image").setAttribute("folderId", folderId);
    $(".single-folder").mousedown(function() {
        clicked = true;
        isDown = true;
        followCursor(event);
    });
    $(document).mouseup(function() {
        clicked = false;
      $('#folder_drag_image').hide();
    if(isDown){
        //dropOnFolder(event, document.getElementById("folder_drag_image").getAttribute("folderId"), )
        isDown = false;
    }
    });
    $(document).mousemove(function(e) {
        if(clicked == true) {
        $('#folder_drag_image').show();
        $('#folder_drag_image').stop(true, true);
        followCursor(event);
    }
    });
    function followCursor(e) {
      clicked = true;
        posX = e.pageX;
        posY = e.pageY;
        $('#folder_drag_image').animate({left: posX, top: posY});
    }
}
function folderDropUp(e, newFolderId) {
    alert(newFolderId);
    isDown = true;
}

它所做的基本上是，当鼠标向下移动到文件夹div上时，它会显示一个id为"folder_drag_image"的假拖动文件夹，该文件夹会跟随鼠标直到鼠标向上移动。

当我想在新文件夹的顶部释放文件夹时，问题就出现了。下面是它的功能。

function folderDropUp(e, newFolderId) {
    alert(newFolderId);
    isDown = true;
}

我去掉了ajax，因为这不是问题的一部分。如果您回顾第一个代码片段，就会发现一个"onMouseUp"侦听器触发一个"folderDropUp"事件。

问题是，如果我把鼠标拖动到带有假拖动图像的文件夹上，folderDropUp函数就不会启动。如果我只是从其他地方拖动我的鼠标，并且当功能启动时，它没有假拖动图像。

我确实尝试过jQuery mouseup函数，但只是得到了相同的输出。

我不知道这会有多大帮助，但通过使用jQueryUI，你可以做这样的事情：

HTML:

<html>
    <head>
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css"/>
        <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
    </head>
    <body>
        <table>
            <tr>
                <td>
                    <div class="single-folder">
                        <div class="single-folder-name" id="single-folder-name-nhaca">
                            <div id="single-folder-rename-nhaca" class="rename-folder-hover">
                                <div>Folder 1</div><div class="folder-drag-image" id="nhaca-drag-image">Folder 1</div>
                            </div>
                        </div>
                    </div>
                </td>
                <td>
                    <div class="single-folder">
                        <div class="single-folder-name" id="single-folder-name-other">
                            <span id="single-folder-rename-other" class="rename-folder-hover">
                                <div>Folder 2</div><div class="folder-drag-image" id="other-drag-image">Folder 2</div>
                            </span>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </body>
</html>

CSS：

.single-folder{
    border: 1px solid black;
    cursor: pointer;
    width: 60px;
}
.folder-drag-image{
    position: absolute;
    height: 20px;
    width: 60px;
    border: 1px solid black;
    display: none;
}
.droppable-ready-to-receive{
    background-color: yellow;
}

JS：

$( document ).ready(function() {
    //displaying draggable element based on hovered element
    $(".single-folder").on("mouseenter", function(e){
         var drag_image = $(this).find(".folder-drag-image");
         drag_image.css({"display": "block", "top": $(this).offset().top + 20, "left": $(this).offset().left});    
    });
    //resetting draggable element when moving outside the "single-folder" div
    $(".single-folder").on("mouseleave", function(e){
         var drag_image = $(this).find(".folder-drag-image");
         drag_image.css("display", "none");
    });

    //resetting draggable element when not being dragged any longer
    $(".folder-drag-image").draggable({
      stop: function(e) {
          var parent = $(this).parents(".single-folder");
          $(this).css({"display": "none", "top": parent.offset().top, "left": parent.offset().left});     
      }
    });
    //defining what elements can be dropped and what to do when dropped
    $(".single-folder").droppable({
        accept: '.folder-drag-image',
        hoverClass: "droppable-ready-to-receive",
        drop: function(e, ui) {
            console.log("Dropped folder " + ui.draggable.text() + " into " + $(this).find(".folder-drag-image").text());
            //handle folder drop however you need from here
        }
    });
});

示例：http://jsfiddle.net/skdfLk5b/3/

我猜这远不是一个好的解决方案，但希望它能有所帮助。

相关文章：