Question

我有一个包含两个元素的页面，两个元素都包含几个字段。其中一个字段的标识为SortingOrderHidden。如果我用jquery和html5改变元素的顺序，我也想改变这个字段的值。我这样试试：

 var dropedElementSortingOrder = 0;
    var draggedElementSortingOrder = 0;
     $(function () {
            function handleDragStart(e) {
                this.style.opacity = '0.5';
                dragSrcEl = this;
                e.dataTransfer.effectAllowed = 'move';
                dropedElementSortingOrder = $(this).find(".SortingOrderHidden");
                e.dataTransfer.setData('text/html', this.innerHTML);
            }

            var cols = document.querySelectorAll('.ProcedureDrag');
            [].forEach.call(cols, function (col) {
                col.addEventListener('dragstart', handleDragStart, false);
                col.addEventListener('dragenter', handleDragEnter, false);
                col.addEventListener('dragover', handleDragOver, false);
                col.addEventListener('dragleave', handleDragLeave, false);
                col.addEventListener('drop', handleDrop, false);
                col.addEventListener('dragend', handleDragEnd, false);
            });
            function handleDragOver(e) {
                if (e.preventDefault) {
                    e.preventDefault();
                } return false;
            }
            function handleDragEnter(e) {
                this.classList.add('over');
            }
            function handleDragLeave(e) {
                this.classList.remove('over');
            }
            function handleDrop(e) {
                if (e.stopPropagation) {
                    e.stopPropagation();
                }
                if (dragSrcEl != this) {
                    draggedElementSortingOrder = $(this).find(".SortingOrderHidden");
                    var a = dropedElementSortingOrder.val();
                    var b = draggedElementSortingOrder.val();
                    dropedElementSortingOrder.val(b);
                    draggedElementSortingOrder.val(a);
                    var c = dropedElementSortingOrder.val();
                    var d = draggedElementSortingOrder.val();
                    $('#SortingOrderChanged').val(true);
                    dragSrcEl.innerHTML = this.innerHTML;
                    this.innerHTML = e.dataTransfer.getData('text/html');
                }
                return false;
            }

            function handleDragEnd(e) {
                [].forEach.call(cols, function (col) {
                    col.classList.remove('over');
                }); this.style.opacity = '1.0';
            }
    });

但它从未改变我移动的元素的值。另一个正在转换职位的人工作正常。同样在调试器（谷歌浏览器）中一切似乎都很好。值（带字母a，b，c，d）符合预期。

这里是JSFiddler中的示例：http://jsfiddle.net/gvKCL/2/ 编辑：我只是说，如果输入是type =“text”，他们甚至不会得到任何值的变化。所以这里是隐藏的版本，它与我的程序完全一样：http://jsfiddle.net/gvKCL/10/

编辑：解决方案： 在这里，您将找到正在运行的示例：http://jsfiddle.net/gvKCL/14/

我必须更改handleDrop，如：

 function handleDrop(e) {
     if (e.stopPropagation) {
         e.stopPropagation();
     }
     if (dragSrcEl != this) {
         dragSrcEl.innerHTML = this.innerHTML;
         this.innerHTML = e.dataTransfer.getData('text/html');
         var draggedElementSortingOrder = $(this).find(".SortingOrderHidden");
         var dropedElementSortingOrder = $(dragSrcEl).find(".SortingOrderHidden");
         var a = dropedElementSortingOrder.val();
         var b = draggedElementSortingOrder.val();
         dropedElementSortingOrder.val(b);
         draggedElementSortingOrder.val(a);
     }
     return false;
 }

Answer 1

我认为这是问题：

this.innerHTML = e.dataTransfer.getData('text/html');

更新字段的.val()时，e.dataTransfer.getData('text/html');的内容不会更新。在函数结束时，当您设置this.innerHTML时，您实际上正在覆盖您的更新，并且该字段将恢复为其原始状态。

jQuery使用html5拖放后更改元素的值

1 个答案: