jquery HTML5拖放效果允许和dropEffect

xuo3flqw 于 2023-10-17 发布在 jQuery

关注(0)|答案(3)|浏览(89)

这两个属性之间的关系似乎是一些混乱的根源。根据阅读the MDN site和MSDN我以为我已经弄明白了，但现在我不确定.
我认为，当一个元素被拖动时，你可以指定它允许发生什么（即，它可以被移动、复制、链接到-effectAllowed常量之一）。这是effectAllowed属性。
不同的放置目标做不同的事情，所以当你拖动另一个元素时，它可以控制在放置时发生的“效果”，这就是“dropEffect”属性。所以我举了一个简单的例子来验证这个理论：
JSFiddle

$("[draggable='true']").on("dragstart", function(e) {
    var dt =  e.originalEvent.dataTransfer;
    dt.effectAllowed = "copyMove";
    dt.setData("text/plain", "Foo");
});

$("#dropZoneCopy").on("dragover", function(e) {
    var dt =  e.originalEvent.dataTransfer;
    dt.dropEffect = "copy";
    e.preventDefault();
});

$("#dropZoneMove").on("dragover", function(e) {
    var dt =  e.originalEvent.dataTransfer;
    dt.dropEffect = "move";
    e.preventDefault();
});

我有一个用户可以拖动的框-允许的效果是“copyMove”。我有一个框，它将dropEffect设置为复制，然后将dropEffect设置为移动。我所期望的是，当用户在“复制框”上拖动时，光标将改变以指示将发生复制，当我在“移动框”上拖动时，光标将改变以指示移动。
只有Chrome的行为符合我的预期。这是因为其他浏览器是错误的，或者因为我不明白规格。正确地？

更新一些更多的信息，从摆弄这个;

在Firefox和Chrome中，如果你有一个dragsource，它指示effectAllowed是“copy”，而一个dropzone指示dropEffect是“move”，那么即使你取消了事件，你也不能在dropzone上拖放。我认为dropEffect对于阅读ondrop来了解如何操作会很有用，但它在Chrome上不可用，dropEffect不会出现在drop处理程序中，例如。尝试读取dataTransfer.dropEffect将显示dropEffect为“none”，即使您将其设置为dragon. dropEffect。如上所述设置dropEffect确实会影响光标的显示方式。
在Firefox上，dropEffect在设置dragon后确实会出现在dropzone上，但它不会影响鼠标光标的显示。在Firefox窗口中，按下Ctrl键会影响鼠标的显示，但不会影响dropEffect属性。
规范显示源代码可以监听dragend事件，以查看发生了什么。它应该查看此事件中的dropEffect。Chrome、Mozilla和Safari的工作方式与您希望的一样，拖放效果出现在dragend事件中。在IE中，如果允许的效果是一个简单的值，例如“copy”，则任何成功的drop都会导致此值在dragend上显示为dropEffect。如果effectAllowed是一个类似copyMove的复合值，并且您试图通过设置dropEffect来选择dragend上的“move”，那么您就不走运了，这将在dragend上的源代码中显示为dropEffect =“none”。您只能使用一个光标和一个dropEffect，如果该效果是一个简单值，则在dragstart上设置effectAllowed。有趣的是，当你从IE11拖到一个本地应用程序中时，它似乎确实会出现dropEffect（我之前假设过）。
其他说明
在Mac上的Safari上，无法自动设置- effectAllowed，因此设置的任何dropEffect都有效。当您按cmd键时，effectAllowed变为“move”，当您按alt键时，effectAllowed变为“copy”。此后，它就像你希望的那样工作，如果dropEffect不是这些effectAlloweds之一，那么浏览器就不允许drop。

更多信息我一直在花一些业余时间在HTML5拖放库上工作，我在文档中写了很多关于这个和其他问题的文章，如果你感兴趣，请看看the project

jquery

来源：https://stackoverflow.com/questions/20471273/html5-drag-and-drop-effectallowed-and-dropeffect

3条答案

按热度按时间

ar7v8xwq1#

我看到您希望使用提供的HTML元素和jQuery实现拖放功能。你的代码里有个小问题您需要处理drop事件以完成拖放功能。下面是更正的代码：

$(function() {
            $("[draggable='true']").on("dragstart", function(e) {
                var dt = e.originalEvent.dataTransfer;
                dt.effectAllowed = "copyMove";
                dt.setData("text/plain", "Foo");
            });

            $("#dropZoneCopy, #dropZoneMove").on("dragover", function(e) {
                e.preventDefault();
                var dt = e.originalEvent.dataTransfer;
                dt.dropEffect = "copy";
            });

            $("#dropZoneCopy").on("drop", function(e) {
                e.preventDefault();
                var data = e.originalEvent.dataTransfer.getData("text/plain");
                $(this).text(data);
            });

            $("#dropZoneMove").on("drop", function(e) {
                e.preventDefault();
                var data = e.originalEvent.dataTransfer.getData("text/plain");
                $(this).text(data);
            });
        });

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drag and Drop Example</title>
    <style>
        [draggable="true"] {
            cursor: move; /* Change cursor to indicate draggable element */
        }

        #dropZoneCopy, #dropZoneMove {
            width: 200px;
            height: 100px;
            border: 2px dashed #000;
            margin: 10px;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div draggable="true">Drag Me!</div>

    <div id="dropZoneCopy">Drop On Me to copy</div>
    <div id="dropZoneMove">Drop On Me to move</div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</body>
</html>

在这段代码中：
CSS将光标设置为“移动”可拖动的元素，使其在视觉上清楚地表明它可以被拖动。
我们为放置区域上的放置事件添加了事件侦听器（#dropZoneCopy和#dropZoneMove），以处理放置操作并使用拖动的数据更新其内容。
现在，当你拖放“拖我！“元素添加到复制或移动放置区，它将用“Foo”文本更新放置区的内容。

赞(0）回复(0）举报 2023-10-17

hgb9j2n62#

查看https://web.dev/drag-and-drop/

function handleDrop(e) {
  e.stopPropagation(); // Stops some browsers from redirecting.
  e.preventDefault();

  var files = e.dataTransfer.files;
  for (var i = 0, f; f = files[i]; i++) {
    // Read the File objects in this FileList.
  }
}

赞(0）回复(0）举报 2023-10-17

e1xvtsh33#

您提供的日志消息似乎与开发环境相关，可能是代码编辑器或集成开发环境（IDE），如Visual Studio Code或类似工具。这些消息通常与使用Prettier的代码格式化有关，Prettier是一种用于JavaScript和其他语言的代码格式化程序。
让我们分解日志的每个部分的含义：

["INFO" - 11:47:04 AM] Formatting completed in 44ms.：这是一条信息性消息，指示代码格式化已成功完成，完成此操作花费了44毫秒。这通常意味着您的代码被自动格式化以遵守您的编码风格规则。
["INFO" - 12:16:47 PM] Formatting file:///d%3A/Javascript/Work/01-Fundamentals-Part-1/index.html：此消息表示位于指定路径（file:///d%3A/Javascript/Work/01-Fundamentals-Part-1/index.html）的文件已格式化。似乎这个文件已成功格式化。
["ERROR" - 12:16:47 PM] Invalid prettier configuration file detected.：这是一条错误消息，指示项目中的Prettier配置文件存在问题。Prettier依赖于一个配置文件（通常命名为.prettierrc或类似文件）来确定代码应该如何格式化。
["ERROR" - 12:16:47 PM] ENOENT: no such file or directory, open 'C:\node_modules\prettier'：此错误消息表明，有一个与Prettier相关的目录丢失或无法访问。它正在C:\node_modules路径中查找prettier目录，但找不到。
Error: ENOENT: no such file or directory, open 'C:\node_modules\prettier'：这是错误消息本身，指示C:\node_modules中的prettier目录丢失。
["ERROR" - 12:16:47 PM] Invalid prettier configuration file detected. See log for details.：此消息重申存在无效的Prettier配置文件，并建议检查日志以获取更多详细信息。
要解决此问题，您应该：
1.确保在项目的根目录或相关位置中有一个有效的Prettier配置文件（例如，.prettierrc）。确保它的格式正确，并指定所需的代码格式规则。
1.检查项目的依赖项（包括Prettier）是否已正确安装。在项目目录中运行npm install或yarn install，以确保安装了所有必需的软件包。
1.如果您遇到Prettier配置文件的问题，请查看其内容并进行必要的更正。
1.确保您的开发环境或代码编辑器已正确配置为使用Prettier。您可能需要检查编辑器的设置或扩展，以确保它与Prettier集成。
1.如果问题仍然存在，请考虑检查错误消息中提到的特定日志，以获取更多详细信息，从而进一步诊断问题。
请记住根据您的特定开发环境和项目设置调整这些步骤。

赞(0）回复(0）举报 2023-10-17

我来回答

jquery HTML5拖放效果允许和dropEffect

3条答案

相关问题

热门标签

最新问答