Question

我在协作网站上实现项目排序的跨窗口拖放，我无法将drags同步到同一个列表。我需要检测是否将一个项目放到同一个列表中以避免＆＃34;添加＆＃34;，＆＃34;删除＆＃34;操作并使用单个＆＃34;移动＆＃34;。

注意：此问题涉及两个浏览器窗口，例如Firefox和Chrome;除非在这种情况下有效，否则它不适合解决方案。此外，我不是在寻找基于服务器的解决方案。

问题的要点可以通过以下方式证明：

＆＃13;

function update(source, className, d){
var count = source.getElementsByClassName(className)[0];
count.innerText = parseInt(count.innerText) + d;
}

var els = document.getElementsByClassName("source");
for(var i = 0; i < els.length; i += 1){
(function(el){
    el.ondragover = function(ev){
        ev.dataTransfer.dropEffect = "move";
        ev.preventDefault();
        ev.stopPropagation();
    };

    el.ondrop = function(ev){
        ev.preventDefault();
        ev.stopPropagation();

        var id = ev.dataTransfer.getData("x/source");
        if(el.dataset.id == id){
            update(el, "self", 1);
            // how to send a value from here to dragEnd -->>
            return;
        }
    };
})(els[i]);
}

var els = document.getElementsByClassName("element");
for(var i = 0; i < els.length; i += 1){
(function(el){
    el.draggable = true;
    
    el.ondragstart = function(ev){
        grabbingFrom = el.parentNode.dataset.id;
        ev.dataTransfer.effectAllowed = "all";
        ev.dataTransfer.setData("x/source", el.parentNode.dataset.id);
        console.log(JSON.stringify(ev.dataTransfer.getData("x/source")));
    }
    
    el.ondragend = function(ev){
        var self = false; // how to get a value <--- here
        if(self){
            update(el, "self", 1);
        }
        ev.preventDefault();
    }
})(els[i]);
}

＆＃13;

.clear { clear: both; }

.source {
float: left; border: 1px solid #000; margin: 32px;
height: 100px; width: 150px;
}

.source .element { width: 32px; height: 32px; margin: 8px;
background: #AAA; margin: 8px;
line-height: 32px; text-align: center;
}

.source .element:hover {
background: hsla(0, 70%, 70%, 1);
cursor: move;
}

＆＃13;

<div class="source" data-id="alpha" >
Alpha
<div class="self">0</div>
<div draggable="true" class="element">X</div>
</div>

<div class="source" data-id="beta" >
Beta
<div class="self">0</div>
<div draggable="true" class="element">X</div>
</div>

＆＃13;

当您从＆＃34; Beta＆＃34;盒子到＆＃34; Beta＆＃34;在交叉窗口中的框，然后是＆＃34; Beta＆＃34;计数应该递增。目前只有一个增量。基本上如何进行沟通＆＃34;是的，我已将此项目放入“测试版”中。框。＆＃34 ;.问题归结为将内容从ondrop事件发送到ondragend。

我一直无法找到合适的方法。有任何想法吗？或者，答案仅仅是它是不可能的。

在浏览器窗口中拖放

0 个答案: