jquery - 在 DragStart 事件中未设置 DataTransfer 对象

Question

我正在尝试实现拖放来更改文章调度系统中的日期。我希望用户能够将一篇文章条目从一个日期拖到另一个日期，然后时间表应该自动更新。这是我的代码:

<script type="text/javascript">
    $(function () {
        $(".scheduledArticleRow").draggable({
            cursor: "move",
            cursorAt: { top: -12, left: -20 },
            opacity: 0.5,
            helper: function (event) {
                return $("<div class='ui-widget-header'>" + $(this).data('title') + "</div>")
            }
        });
        $(".articleNeededRow").droppable();
        $(".reservedDateRow").droppable();

        $(".scheduledArticleRow").off("dragstart").on("dragstart", function (e) {
            console.log("dragstart");
            e.dataTransfer.setData("articleId", $(this).data("articleId"));    // Uncaught TypeError: Cannot call method 'setData' of undefined 
            e.dataTransfer.setData("oldDate", $(this).data("date"));        // Uncaught TypeError: Cannot call method 'setData' of undefined
            e.originalEvent.dataTransfer.setData("articleId", $(this).data("articleId"));    // Uncaught TypeError: Cannot call method 'setData' of undefined 
            e.originalEvent.dataTransfer.setData("oldDate", $(this).data("date"));            // Uncaught TypeError: Cannot call method 'setData' of undefined
        });
        $(".articleNeededRow").off("drop").on('drop', function (e) {
            console.log("drop");
            e.preventDefault();
            e.stopPropagation();
            changeScheduledDate(e);
        });
        $(".reservedDateRow").off("drop").on('drop', function (e) {
            console.log("drop");
            e.preventDefault();
            e.stopPropagation();
            changeScheduledDate(e);
        });
    });

    function changeScheduledDate(e) {
        debugger;
        var articleId = e.dataTransfer.getData("articleId");    // Uncaught TypeError: Cannot call method 'setData' of undefined 
        var oldDate = e.dataTransfer.getData("oldDate");        // Uncaught TypeError: Cannot call method 'setData' of undefined
        articleId = e.originalEvent.dataTransfer.getData("articleId", $(this).data("articleId"));    // Uncaught TypeError: Cannot call method 'setData' of undefined 
        oldDate = e.originalEvent.dataTransfer.getData("oldDate", $(this).data("date"));            // Uncaught TypeError: Cannot call method 'setData' of undefined

        var newDate = $(this).parents(".tr").data("date");

        // Do date-change stuff
    }


</script>

<div class="table tidytable" width="90%">
    <div class="thead">
        <div class="cell">Date</div>
        <div class="cell">Article title</div>
    </div>
    <div class="tbody" id="scheduleBody">
        <div class="tr articleNeededRow" data-date="2014-02-11">
            <div class="cell"><strong>Tue, 11th Feb</strong></div>
            <div class="cell articleNeeded">Article needed.</div>
        </div>
        <div class="tr articleNeededRow" data-date="2014-02-12">
            <div class="cell"><strong>Wed, 12th Feb</strong></div>
            <div class="cell articleNeeded">Article needed.</div>
        </div>
        <div class="tr reservedDateRow" data-date="2014-02-13">
            <div class="cell"><strong>Thu, 13th Feb</strong></div>
            <div class="cell articleNeeded"><strong>Reserved for an upcoming article.</strong></div>
        </div>
        <div class="tr scheduledArticleRow" data-date="2014-02-14" data-articleid="8789" data-title="This is the title"
            draggable="true">
            <div class="cell"><strong>Fri, 14th Feb</strong></div>
            <div class="cell">
                <h3>This is the title</h3>
            </div>
        </div>
    </div>
</div>

我正在使用 .css 表。用户应该能够从“这是标题”行中的任意位置拖动到任何其他行。但在 DragStart 事件处理程序中，e.dataTransfer 设置为 null，并且无法将任何数据传递给 drop 事件。我不想诉诸 cookie、HTML5 本地存储或全局变量 - 这个东西应该可以工作。我使用 dataTransfer 进行拖放，在应用程序的其他部分中运行良好。有些帖子建议我需要使用 e.originalEvent.dataTransfer，但这也是空的。顺便说一句，我正在使用谷歌浏览器。我创建了一个 jsFiddle - http://jsfiddle.net/btA97/ - 非常感谢任何帮助。

Answer 1

您的 .draggable() 似乎做错了什么。您还需要在拖拽中执行 e.preventDefault() 和 e.stopPropagation() 以确保发生放置。

此代码正确获取所有事件:

   $(function () {
       /*
       $(".scheduledArticleRow").draggable({
           cursor: "move",
           cursorAt: {
               top: -12,
               left: -20
           },
           opacity: 0.5,
           helper: function (event) {
               return $("<div class='ui-widget-header'>" + $(this).data('title') + "</div>")
           }
       });
        */

       $(".articleNeededRow").droppable(); // With this commented out the code still works
       $(".reservedDateRow").droppable(); // This one too

       $(".scheduledArticleRow").on("dragstart", function (e) {
           console.log("dragstart");
           console.dir(e);
           e.originalEvent.dataTransfer.setData("articleId", $(this).data("articleId"))
           e.originalEvent.dataTransfer.setData("oldDate", $(this).data("date"));
       });
       $(".articleNeededRow").on('dragover', function (e) {
           console.log("dragover");
           e.preventDefault();
           e.stopPropagation();
       });
       $(".articleNeededRow").on('drop', function (e) {
           console.log("drop");
           e.preventDefault();
           e.stopPropagation();
           changeScheduledDate(e);
       });
       $(".reservedDateRow").on('dragover', function (e) {
           console.log("dragover");
           e.preventDefault();
           e.stopPropagation();
       });
       $(".reservedDateRow").on('drop', function (e) {
           console.log("drop");
           e.preventDefault();
           e.stopPropagation();
           changeScheduledDate(e);
       });
   });

   function changeScheduledDate(e) {
       articleId = e.originalEvent.dataTransfer.getData("articleId");
       oldDate = e.originalEvent.dataTransfer.getData("oldDate");
       console.log("articleID: "+articleId);
       console.log("oldDate: "+oldDate);

       var newDate = $(this).parents(".tr").data("date");
       console.log("newDate: "+newDate);

       // Do date-change stuff
   }