Fatal编程技术网
  • javascript/
  • Javascript 当有东西跟随光标时检测鼠标悬停

Javascript 当有东西跟随光标时检测鼠标悬停

javascript jquery html

Javascript 当有东西跟随光标时检测鼠标悬停,javascript,jquery,html,drag-and-drop,Javascript,Jquery,Html,Drag And Drop,我一直在开发一个在线文件系统，我希望用户能够将文件拖放到新的位置。我真的不喜欢默认的拖放视觉效果，所以我没有使用传统的方法。这就是我目前所拥有的 此代码位于.php文件中，该文件通过jQuery加载到主页面 <td draggable = "true" ondragstart="dragFolder(event, \''.$folderId.'\', \''.$folderName.'\')"> <div class = "single-folder" on

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

此代码位于.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>
基本上它是这样做的，当鼠标在一个文件夹div上移动时，它会显示一个假拖动文件夹，id为folder\u drag\u image，跟随鼠标直到鼠标向上移动

当我想在新文件夹的顶部释放文件夹时，问题就出现了。下面是用于此的函数

function folderDropUp(e, newFolderId) {
    alert(newFolderId);
    isDown = true;
}
我去掉了ajax，因为这不是问题的一部分。如果您回顾第一个代码段，就会发现一个onMouseUp侦听器触发folderDropUp事件

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

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

我不知道这会有多大帮助，但使用jQueryUI，您可以执行以下操作：

HTML:

JS:

例如：

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

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

<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>

.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;
} 

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