在 dragStart 事件中未设置数据传输对象

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本地存储或全局变量 - 这个东西应该可以工作。我使用数据传输将其拖放在应用程序的其他部分很好地工作。 有些帖子建议我需要使用 e.originalEvent.dataTransfer，但这也是空的。我正在使用谷歌浏览器BTW。 我创建了一个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
   }

Answer 2

需要使用 event.originalEvent 对象。