I can't seem to figure out why SOMETIMES, when I drag items in this list to other locations that the ondragstart event doesn't seem to fire but the ondrop does. It seems to happen reliably when you drag item A to item B's location and then A & B swap. Item B who is now in item A's original position doesn't seem to fire ondragstart when you try to drag item B anymore. I tried reapplying the events incase during the swapping it is lost but this doesn't seem to work. Any insight would be most appreciated.
document.addEventListener("DOMContentLoaded", function(event) {
makingRanking();
});
function makingRanking(){
var ranking_groups = document.getElementsByClassName("Ranking");
for (var i=0; i < ranking_groups.length; i++){
var ranking_items = ranking_groups[i].getElementsByClassName("DemoQuest");
for(var j=0; j < ranking_items.length; j++){
var id = ranking_items[j].id;
ranking_items[j].draggable = true;
ranking_items[j].ondragstart = function(){ dragStart(event);}
ranking_items[j].ondrop = function(){ dropHappened(event);}
ranking_items[j].ondragover = function(){ dragAndDrop(event);}
}
}
};
function dragStart(ev){
if (ev.target.classList.contains("DemoQuest")){
ev.dataTransfer.setData("text", ev.target.id);
console.log("Dragging: " + ev.target.children[0].innerHTML);
} else {
ev.dataTransfer.setData("text", ev.target.parentElement.id);
console.log("Dragging: " + ev.target.innerHTML);
}
};
function dropHappened(ev){
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
var dragged_item = document.getElementById(data);
var temp = "";
console.log("Dropping onto: " + ev.target.children[0].innerHTML);
if (data != ""){
if (ev.target.classList.contains("DemoQuest")){
temp = ev.target.outerHTML;
ev.target.outerHTML = document.getElementById(data).outerHTML;
ev.target.draggable = true;
ev.target.ondragstart = function(){ dragStart(event);}
ev.target.ondrop = function(){ dropHappened(event);}
ev.target.ondragover = function(){ dragAndDrop(event);}
} else {
temp = ev.target.parentElement.outerHTML;
ev.target.parentElement.outerHTML = document.getElementById(data).outerHTML;
ev.target.parentElement.draggable = true;
ev.target.parentElement.ondragstart = function(){ dragStart(event);}
ev.target.parentElement.ondrop = function(){ dropHappened(event);}
ev.target.parentElement.ondragover = function(){ dragAndDrop(event);}
}
document.getElementById(data).id = data + '_temp';
document.getElementById(data).outerHTML = temp;
document.getElementById(data + '_temp').id = data;
document.getElementById(data).draggable = true;
document.getElementById(data).ondragstart = function(){ dragStart(event);}
document.getElementById(data).ondrop = function(){ dropHappened(event);}
document.getElementById(data).ondragover = function(){ dragAndDrop(event);}
} else {
console.log("HOW THE FUCK?");
console.log("Dropping on to: " + ev.target.id);
}
};
function dragAndDrop(ev){
ev.preventDefault();
//console.log("Passing over: " + ev.target.children[0].innerHTML);
};.Ranking .ResponseSet{
display:none;
}
.Ranking .DemoQuest{
text-align: center;
vertical-align: top;
background-color: #C4C4C4;
border-radius: 3px;
color: black;
padding: 10px 12px;
padding-top: 10px;
transition-duration: 0.4s;
font-size: 16px;
vertical-align: middle;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
cursor: pointer;
margin-bottom:5px;
}
.Ranking .Span{
display:inline-block;
pointer-events:none;
background-color:yellowgreen;
}
.RankItem{
display: inline-block;
width:15%;
padding-top:8px;
margin-top:-8px;
padding-bottom:8px;
margin-bottom:-8px;
}
.RankItem.Up{
position:left;
}
.RankItem.Up:after{
content: "Up";
}
.RankItem.Dn{
position:right;
}
.RankItem.Dn:after{
content: "Dn";
}
.Ranking .ShiftedUp{
margin-top: 50px;
margin-bottom: -178px !important;
transition-duration: .3s;
}
.Ranking .ShiftedDn{
margin-top: 97px;
margin-bottom: 50px !important;
transition-duration: .3s;
}
.DemoQuest{/* .RankItem.Up{*/
background-color:green;
}<div class="Ranking"><div></div>
<div id="d3f4ba0b81734d108c2ae8dfa8164d23" class="HtmlBlock"><h3>Please rank the following franchises:</h3></div>
<div id="397e27bcb9cd4de09f8bf5afe78a6514" class="DemoQuest" draggable="true">
<div class="Span">The Legend of Zelda</div>
<div class="ResponseSet Below">
<div id="3da52dd8b7794d04bb6e168c3287b9c1" class="DemoResp">
<span class="Selector"><input type="radio" id="rb_3da52dd8b7794d04bb6e168c3287b9c1" name="rb_397e27bcb9cd4de09f8bf5afe78a6514" value="1" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('rb_3da52dd8b7794d04bb6e168c3287b9c1');" for="rb_3da52dd8b7794d04bb6e168c3287b9c1">1</div></span>
<span class="ResponseText">1</span>
</div>
<div id="048baee99ef84e788b5ce33173e01c96" class="DemoResp">
<span class="Selector"><input type="radio" id="rb_048baee99ef84e788b5ce33173e01c96" name="rb_397e27bcb9cd4de09f8bf5afe78a6514" value="2" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('rb_048baee99ef84e788b5ce33173e01c96');" for="rb_048baee99ef84e788b5ce33173e01c96">2</div></span>
<span class="ResponseText">2</span>
</div>
<div id="aaf2d34bec0b4bbbb27a5d31235ce8ed" class="DemoResp">
<span class="Selector"><input type="radio" id="rb_aaf2d34bec0b4bbbb27a5d31235ce8ed" name="rb_397e27bcb9cd4de09f8bf5afe78a6514" value="3" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('rb_aaf2d34bec0b4bbbb27a5d31235ce8ed');" for="rb_aaf2d34bec0b4bbbb27a5d31235ce8ed">3</div></span>
<span class="ResponseText">3</span>
</div>
<div id="c4c0673fd65049be83a48268d6f48f91" class="DemoResp">
<span class="Selector"><input type="radio" id="rb_c4c0673fd65049be83a48268d6f48f91" name="rb_397e27bcb9cd4de09f8bf5afe78a6514" value="4" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('rb_c4c0673fd65049be83a48268d6f48f91');" for="rb_c4c0673fd65049be83a48268d6f48f91">4</div></span>
<span class="ResponseText">4</span>
</div>
<div id="a8cd5aaf73a34e438ff3d2755a6ff01d" class="DemoResp">
<span class="Selector"><input type="radio" id="rb_a8cd5aaf73a34e438ff3d2755a6ff01d" name="rb_397e27bcb9cd4de09f8bf5afe78a6514" value="5" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('rb_a8cd5aaf73a34e438ff3d2755a6ff01d');" for="rb_a8cd5aaf73a34e438ff3d2755a6ff01d">5</div></span>
<span class="ResponseText">5</span>
</div>
<div id="4bf3a085905c4de981aca2e8dc985d72" class="DemoResp">
<span class="Selector"><input type="radio" id="rb_4bf3a085905c4de981aca2e8dc985d72" name="rb_397e27bcb9cd4de09f8bf5afe78a6514" value="6" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('rb_4bf3a085905c4de981aca2e8dc985d72');" for="rb_4bf3a085905c4de981aca2e8dc985d72">6</div></span>
<span class="ResponseText">6</span>
</div>
<div id="5d225dcb6db0429985a86c339abe7185" class="DemoResp">
<span class="Selector"><input type="radio" id="rb_5d225dcb6db0429985a86c339abe7185" name="rb_397e27bcb9cd4de09f8bf5afe78a6514" value="7" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('rb_5d225dcb6db0429985a86c339abe7185');" for="rb_5d225dcb6db0429985a86c339abe7185">7</div></span>
<span class="ResponseText">7</span>
</div>
<div id="6e8c6dc9aeb944029a8bcd4fe5bc98c6" class="DemoResp">
<span class="Selector"><input type="radio" id="rb_6e8c6dc9aeb944029a8bcd4fe5bc98c6" name="rb_397e27bcb9cd4de09f8bf5afe78a6514" value="8" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('rb_6e8c6dc9aeb944029a8bcd4fe5bc98c6');" for="rb_6e8c6dc9aeb944029a8bcd4fe5bc98c6">8</div></span>
<span class="ResponseText">8</span>
</div>
<div id="12e23689f21348248c84a8ab822d955a" class="DemoResp">
<span class="Selector"><input type="radio" id="rb_12e23689f21348248c84a8ab822d955a" name="rb_397e27bcb9cd4de09f8bf5afe78a6514" value="9" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('rb_12e23689f21348248c84a8ab822d955a');" for="rb_12e23689f21348248c84a8ab822d955a">9</div></span>
<span class="ResponseText">9</span>
</div>
<div id="d46896b10f8245f987c3145008a4a435" class="DemoResp">
<span class="Selector"><input type="radio" id="rb_d46896b10f8245f987c3145008a4a435" name="rb_397e27bcb9cd4de09f8bf5afe78a6514" value="10" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('rb_d46896b10f8245f987c3145008a4a435');" for="rb_d46896b10f8245f987c3145008a4a435">10</div></span>
<span class="ResponseText">10</span>
</div>
</div>
</div>
<div id="af02f7773f5d4836985e9f6ac30f73d7" class="DemoQuest Alt" draggable="true">
<div class="Span">Super Mario Bros.</div>
<div class="ResponseSet Below">
<div id="29bf9834ee77489b9ca87ed765253401" class="DemoResp">
<span class="Selector"><input type="radio" id="rb_29bf9834ee77489b9ca87ed765253401" name="rb_af02f7773f5d4836985e9f6ac30f73d7" value="1" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('rb_29bf9834ee77489b9ca87ed765253401');" for="rb_29bf9834ee77489b9ca87ed765253401">1</div></span>
<span class="ResponseText">1</span>
</div>
<div id="7ea0ff2a870c43d5a906177932086556" class="DemoResp">
<span class="Selector"><input type="radio" id="rb_7ea0ff2a870c43d5a906177932086556" name="rb_af02f7773f5d4836985e9f6ac30f73d7" value="2" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('rb_7ea0ff2a870c43d5a906177932086556');" for="rb_7ea0ff2a870c43d5a906177932086556">2</div></span>
<span class="ResponseText">2</span>
</div>
<div id="6e92571451624e27bb61a39677fa36b3" class="DemoResp">
<span class="Selector"><input type="radio" id="rb_6e92571451624e27bb61a39677fa36b3" name="rb_af02f7773f5d4836985e9f6ac30f73d7" value="3" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('rb_6e92571451624e27bb61a39677fa36b3');" for="rb_6e92571451624e27bb61a39677fa36b3">3</div></span>
<span class="ResponseText">3</span>
</div>
<div id="51572aa543084adf99fbc68a8d12619a" class="DemoResp">
<span class="Selector"><input type="radio" id="rb_51572aa543084adf99fbc68a8d12619a" name="rb_af02f7773f5d4836985e9f6ac30f73d7" value="4" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('rb_51572aa543084adf99fbc68a8d12619a');" for="rb_51572aa543084adf99fbc68a8d12619a">4</div></span>
<span class="ResponseText">4</span>
</div>
<div id="c0ce5df78f1c49aa8a00bd9abd74ffa5" class="DemoResp">
<span class="Selector"><input type="radio" id="rb_c0ce5df78f1c49aa8a00bd9abd74ffa5" name="rb_af02f7773f5d4836985e9f6ac30f73d7" value="5" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('rb_c0ce5df78f1c49aa8a00bd9abd74ffa5');" for="rb_c0ce5df78f1c49aa8a00bd9abd74ffa5">5</div></span>
<span class="ResponseText">5</span>
</div>
<div id="2258748471ab42fb9a826c9efcdcb9f0" class="DemoResp">
<span class="Selector"><input type="radio" id="rb_2258748471ab42fb9a826c9efcdcb9f0" name="rb_af02f7773f5d4836985e9f6ac30f73d7" value="6" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('rb_2258748471ab42fb9a826c9efcdcb9f0');" for="rb_2258748471ab42fb9a826c9efcdcb9f0">6</div></span>
<span class="ResponseText">6</span>
</div>
<div id="c7abf2debf414c42b0cff51853f5d3c8" class="DemoResp">
<span class="Selector"><input type="radio" id="rb_c7abf2debf414c42b0cff51853f5d3c8" name="rb_af02f7773f5d4836985e9f6ac30f73d7" value="7" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('rb_c7abf2debf414c42b0cff51853f5d3c8');" for="rb_c7abf2debf414c42b0cff51853f5d3c8">7</div></span>
<span class="ResponseText">7</span>
</div>
<div id="39bd6ada75dd4c96bd346aa6f00b4e0a" class="DemoResp">
<span class="Selector"><input type="radio" id="rb_39bd6ada75dd4c96bd346aa6f00b4e0a" name="rb_af02f7773f5d4836985e9f6ac30f73d7" value="8" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('rb_39bd6ada75dd4c96bd346aa6f00b4e0a');" for="rb_39bd6ada75dd4c96bd346aa6f00b4e0a">8</div></span>
<span class="ResponseText">8</span>
</div>
<div id="439ecda4d89a4303a78d815f04e95225" class="DemoResp">
<span class="Selector"><input type="radio" id="rb_439ecda4d89a4303a78d815f04e95225" name="rb_af02f7773f5d4836985e9f6ac30f73d7" value="9" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('rb_439ecda4d89a4303a78d815f04e95225');" for="rb_439ecda4d89a4303a78d815f04e95225">9</div></span>
<span class="ResponseText">9</span>
</div>
<div id="8d7a621dd10f487c919ad28b8219fc0f" class="DemoResp">
<span class="Selector"><input type="radio" id="rb_8d7a621dd10f487c919ad28b8219fc0f" name="rb_af02f7773f5d4836985e9f6ac30f73d7" value="10" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('rb_8d7a621dd10f487c919ad28b8219fc0f');" for="rb_8d7a621dd10f487c919ad28b8219fc0f">10</div></span>
<span class="ResponseText">10</span>
</div>
</div>
</div>
<div id="ce10f675bf4c4f3ebc4038292e6a2ad9" class="DemoQuest" draggable="true">
<div class="Span">Super Smash Bros.</div>
<div class="ResponseSet Below">
<div id="0932574b9c844d48a1c856c08a911d27" class="DemoResp">
<span class="Selector"><input type="radio" id="rb_0932574b9c844d48a1c856c08a911d27" name="rb_ce10f675bf4c4f3ebc4038292e6a2ad9" value="1" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('rb_0932574b9c844d48a1c856c08a911d27');" for="rb_0932574b9c844d48a1c856c08a911d27">1</div></span>
<span class="ResponseText">1</span>
</div>
<div id="d142d26151b1430e89e1b35ef2363514" class="DemoResp">
<span class="Selector"><input type="radio" id="rb_d142d26151b1430e89e1b35ef2363514" name="rb_ce10f675bf4c4f3ebc4038292e6a2ad9" value="2" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('rb_d142d26151b1430e89e1b35ef2363514');" for="rb_d142d26151b1430e89e1b35ef2363514">2</div></span>
<span class="ResponseText">2</span>
</div>
<div id="3601f4715e5d4d86b70db8b72c6ad8cc" class="DemoResp">
<span class="Selector"><input type="radio" id="rb_3601f4715e5d4d86b70db8b72c6ad8cc" name="rb_ce10f675bf4c4f3ebc4038292e6a2ad9" value="3" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('rb_3601f4715e5d4d86b70db8b72c6ad8cc');" for="rb_3601f4715e5d4d86b70db8b72c6ad8cc">3</div></span>
<span class="ResponseText">3</span>
</div>
<div id="1208aabcb75b47439cf39821d31c7f59" class="DemoResp">
<span class="Selector"><input type="radio" id="rb_1208aabcb75b47439cf39821d31c7f59" name="rb_ce10f675bf4c4f3ebc4038292e6a2ad9" value="4" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('rb_1208aabcb75b47439cf39821d31c7f59');" for="rb_1208aabcb75b47439cf39821d31c7f59">4</div></span>
<span class="ResponseText">4</span>
</div>
<div id="5b012f42d067477a865cde0c36347153" class="DemoResp">
<span class="Selector"><input type="radio" id="rb_5b012f42d067477a865cde0c36347153" name="rb_ce10f675bf4c4f3ebc4038292e6a2ad9" value="5" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('rb_5b012f42d067477a865cde0c36347153');" for="rb_5b012f42d067477a865cde0c36347153">5</div></span>
<span class="ResponseText">5</span>
</div>
<div id="34639b5b2a5841118801284af4eb5107" class="DemoResp">
<span class="Selector"><input type="radio" id="rb_34639b5b2a5841118801284af4eb5107" name="rb_ce10f675bf4c4f3ebc4038292e6a2ad9" value="6" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('rb_34639b5b2a5841118801284af4eb5107');" for="rb_34639b5b2a5841118801284af4eb5107">6</div></span>
<span class="ResponseText">6</span>
</div>
<div id="20e55e32ec124a359192e8ae33663f65" class="DemoResp">
<span class="Selector"><input type="radio" id="rb_20e55e32ec124a359192e8ae33663f65" name="rb_ce10f675bf4c4f3ebc4038292e6a2ad9" value="7" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('rb_20e55e32ec124a359192e8ae33663f65');" for="rb_20e55e32ec124a359192e8ae33663f65">7</div></span>
<span class="ResponseText">7</span>
</div>
<div id="b65d6c72f91740ac94fb9070b8782a28" class="DemoResp">
<span class="Selector"><input type="radio" id="rb_b65d6c72f91740ac94fb9070b8782a28" name="rb_ce10f675bf4c4f3ebc4038292e6a2ad9" value="8" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('rb_b65d6c72f91740ac94fb9070b8782a28');" for="rb_b65d6c72f91740ac94fb9070b8782a28">8</div></span>
<span class="ResponseText">8</span>
</div>
<div id="524194a884c34eda8452c1221a95adfe" class="DemoResp">
<span class="Selector"><input type="radio" id="rb_524194a884c34eda8452c1221a95adfe" name="rb_ce10f675bf4c4f3ebc4038292e6a2ad9" value="9" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('rb_524194a884c34eda8452c1221a95adfe');" for="rb_524194a884c34eda8452c1221a95adfe">9</div></span>
<span class="ResponseText">9</span>
</div>
<div id="1178c78a9a974cadab289b2a32006e51" class="DemoResp">
<span class="Selector"><input type="radio" id="rb_1178c78a9a974cadab289b2a32006e51" name="rb_ce10f675bf4c4f3ebc4038292e6a2ad9" value="10" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('rb_1178c78a9a974cadab289b2a32006e51');" for="rb_1178c78a9a974cadab289b2a32006e51">10</div></span>
<span class="ResponseText">10</span>
</div>
</div>
</div>
<div id="baa3db8e634b4e9fb44dfde0b762a2ac" class="DemoQuest Alt" draggable="true">
<div class="Span">Grand Theft Auto</div>
<div class="ResponseSet Below">
<div id="b6fb8b5bca8146e09182eb4d436aca7b" class="DemoResp">
<span class="Selector"><input type="radio" id="rb_b6fb8b5bca8146e09182eb4d436aca7b" name="rb_baa3db8e634b4e9fb44dfde0b762a2ac" value="1" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('rb_b6fb8b5bca8146e09182eb4d436aca7b');" for="rb_b6fb8b5bca8146e09182eb4d436aca7b">1</div></span>
<span class="ResponseText">1</span>
</div>
<div id="488b2751c35c46b9b5fc6602a46e3ea1" class="DemoResp">
<span class="Selector"><input type="radio" id="rb_488b2751c35c46b9b5fc6602a46e3ea1" name="rb_baa3db8e634b4e9fb44dfde0b762a2ac" value="2" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('rb_488b2751c35c46b9b5fc6602a46e3ea1');" for="rb_488b2751c35c46b9b5fc6602a46e3ea1">2</div></span>
<span class="ResponseText">2</span>
</div>
<div id="c9aee652e3f34bc9af0744921c5a0cdb" class="DemoResp">
<span class="Selector"><input type="radio" id="rb_c9aee652e3f34bc9af0744921c5a0cdb" name="rb_baa3db8e634b4e9fb44dfde0b762a2ac" value="3" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('rb_c9aee652e3f34bc9af0744921c5a0cdb');" for="rb_c9aee652e3f34bc9af0744921c5a0cdb">3</div></span>
<span class="ResponseText">3</span>
</div>
<div id="8632c38956c540e6abf6cdb385f60b8b" class="DemoResp">
<span class="Selector"><input type="radio" id="rb_8632c38956c540e6abf6cdb385f60b8b" name="rb_baa3db8e634b4e9fb44dfde0b762a2ac" value="4" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('rb_8632c38956c540e6abf6cdb385f60b8b');" for="rb_8632c38956c540e6abf6cdb385f60b8b">4</div></span>
<span class="ResponseText">4</span>
</div>
<div id="ac2469bdeb764ede8d5b0720f36aecc1" class="DemoResp">
<span class="Selector"><input type="radio" id="rb_ac2469bdeb764ede8d5b0720f36aecc1" name="rb_baa3db8e634b4e9fb44dfde0b762a2ac" value="5" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('rb_ac2469bdeb764ede8d5b0720f36aecc1');" for="rb_ac2469bdeb764ede8d5b0720f36aecc1">5</div></span>
<span class="ResponseText">5</span>
</div>
<div id="c9bf9c367474498e85d3dd56e84d65d7" class="DemoResp">
<span class="Selector"><input type="radio" id="rb_c9bf9c367474498e85d3dd56e84d65d7" name="rb_baa3db8e634b4e9fb44dfde0b762a2ac" value="6" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('rb_c9bf9c367474498e85d3dd56e84d65d7');" for="rb_c9bf9c367474498e85d3dd56e84d65d7">6</div></span>
<span class="ResponseText">6</span>
</div>
<div id="59e0ef70f87147bab8f90c5f78cd1aa6" class="DemoResp">
<span class="Selector"><input type="radio" id="rb_59e0ef70f87147bab8f90c5f78cd1aa6" name="rb_baa3db8e634b4e9fb44dfde0b762a2ac" value="7" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('rb_59e0ef70f87147bab8f90c5f78cd1aa6');" for="rb_59e0ef70f87147bab8f90c5f78cd1aa6">7</div></span>
<span class="ResponseText">7</span>
</div>
<div id="6647d814575840baa52bd427c88c23ca" class="DemoResp">
<span class="Selector"><input type="radio" id="rb_6647d814575840baa52bd427c88c23ca" name="rb_baa3db8e634b4e9fb44dfde0b762a2ac" value="8" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('rb_6647d814575840baa52bd427c88c23ca');" for="rb_6647d814575840baa52bd427c88c23ca">8</div></span>
<span class="ResponseText">8</span>
</div>
<div id="c75153fce3474a9d95c68afb4b9c799e" class="DemoResp">
<span class="Selector"><input type="radio" id="rb_c75153fce3474a9d95c68afb4b9c799e" name="rb_baa3db8e634b4e9fb44dfde0b762a2ac" value="9" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('rb_c75153fce3474a9d95c68afb4b9c799e');" for="rb_c75153fce3474a9d95c68afb4b9c799e">9</div></span>
<span class="ResponseText">9</span>
</div>
<div id="ba8906b5317949b0a4357629a9bffd38" class="DemoResp">
<span class="Selector"><input type="radio" id="rb_ba8906b5317949b0a4357629a9bffd38" name="rb_baa3db8e634b4e9fb44dfde0b762a2ac" value="10" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('rb_ba8906b5317949b0a4357629a9bffd38');" for="rb_ba8906b5317949b0a4357629a9bffd38">10</div></span>
<span class="ResponseText">10</span>
</div>
</div>
</div>
</div>What should be happening is that when one item is dragged on top of another, they should over write each other. This does happen, but it should happen without issue any number of times in any direction. Items seem to no longer support dragging after getting swapped and in some other scenarios I haven't yet nailed down. You may have to be full screen to see what is going on. Again any insight would be appreciated.
So it seems that setting outerHTML causes problems somehow. I don't know why or understand how, but it does. If you are trying to do this you want to use replaceChild and insertBefore to do the swap. Once the swap is done 'properly', drag and drop will continue to work after swapping.