2017-04-22 17 views
0

我似乎无法弄清楚为什么有时候,当我将这个列表中的项目拖到其他位置时,ondragstart事件似乎并没有触发,但ondrop支持。当您将项目A拖到项目B的位置,然后A交换时,它似乎可靠地发生。项目B现在处于项目A的原始位置,当您尝试拖动项目B时,似乎不会触发ondragstart。我尝试在交换过程中重新应用事件,但这似乎不起作用。任何洞察力将是最赞赏。onDragstart not firing但是onDrop does - 排名测试

document.addEventListener("DOMContentLoaded", function(event) { 
 
     makingRanking(); 
 
    }); 
 
    
 
    function makingRanking(){ 
 
    \t var ranking_groups = document.getElementsByClassName("Ranking"); 
 
    \t 
 
    \t for (var i=0; i < ranking_groups.length; i++){ 
 
    \t \t var ranking_items = ranking_groups[i].getElementsByClassName("DemoQuest"); 
 
    \t \t 
 
    \t \t for(var j=0; j < ranking_items.length; j++){ 
 
    \t \t \t var id = ranking_items[j].id; 
 
    \t \t \t ranking_items[j].draggable = true; 
 
    \t \t \t ranking_items[j].ondragstart = function(){ dragStart(event);} 
 
    \t \t \t ranking_items[j].ondrop = function(){ dropHappened(event);} 
 
    \t \t \t ranking_items[j].ondragover = function(){ dragAndDrop(event);} \t \t 
 
    \t \t } 
 
    \t } 
 
    }; 
 
    
 
    function dragStart(ev){ 
 
    \t if (ev.target.classList.contains("DemoQuest")){ 
 
    \t \t ev.dataTransfer.setData("text", ev.target.id); 
 
    \t \t console.log("Dragging: " + ev.target.children[0].innerHTML); 
 
    \t } else { 
 
    \t \t ev.dataTransfer.setData("text", ev.target.parentElement.id); 
 
    \t \t console.log("Dragging: " + ev.target.innerHTML); 
 
    \t } 
 
    \t 
 
    }; 
 
    
 
    function dropHappened(ev){ 
 
    \t ev.preventDefault(); 
 
    \t var data = ev.dataTransfer.getData("text"); 
 
    \t var dragged_item = document.getElementById(data); 
 
    \t var temp = ""; 
 
    \t console.log("Dropping onto: " + ev.target.children[0].innerHTML); 
 
    \t if (data != ""){ 
 
    \t \t if (ev.target.classList.contains("DemoQuest")){ 
 
    \t \t \t temp = ev.target.outerHTML; 
 
    \t \t \t ev.target.outerHTML = document.getElementById(data).outerHTML; 
 
    \t \t \t ev.target.draggable = true; 
 
    \t \t \t ev.target.ondragstart = function(){ dragStart(event);} 
 
    \t \t \t ev.target.ondrop = function(){ dropHappened(event);} 
 
    \t \t \t ev.target.ondragover = function(){ dragAndDrop(event);} 
 
    \t \t } else { 
 
    \t \t \t temp = ev.target.parentElement.outerHTML; 
 
    \t \t \t ev.target.parentElement.outerHTML = document.getElementById(data).outerHTML; 
 
    \t \t \t ev.target.parentElement.draggable = true; 
 
    \t \t \t ev.target.parentElement.ondragstart = function(){ dragStart(event);} 
 
    \t \t \t ev.target.parentElement.ondrop = function(){ dropHappened(event);} 
 
    \t \t \t ev.target.parentElement.ondragover = function(){ dragAndDrop(event);} 
 
    \t \t } 
 
    \t \t document.getElementById(data).id = data + '_temp'; 
 
    \t \t document.getElementById(data).outerHTML = temp; 
 
    \t \t document.getElementById(data + '_temp').id = data; 
 
    \t \t document.getElementById(data).draggable = true; 
 
    \t \t document.getElementById(data).ondragstart = function(){ dragStart(event);} 
 
    \t \t document.getElementById(data).ondrop = function(){ dropHappened(event);} 
 
    \t \t document.getElementById(data).ondragover = function(){ dragAndDrop(event);} 
 
    \t } else { 
 
    \t \t console.log("HOW THE FUCK?"); 
 
    \t \t console.log("Dropping on to: " + ev.target.id); 
 
    \t } 
 
    }; 
 
    
 
    function dragAndDrop(ev){ 
 
    \t ev.preventDefault(); 
 
    \t //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>

什么应该发生的是,当一个项目拖在另一个上面,他们应该在写对方。这确实发生了,但是在任何方向上都应该发生任何次数的问题。项目似乎不再支持在交换后拖动,在其他情况下我还没有确定下来。您可能必须全屏查看正在发生的事情。再次,任何见解将不胜感激。

回答

0

因此,似乎设置outerHTML以某种方式导致问题。我不知道为什么或理解如何,但它确实如此。如果您正在尝试执行此操作,您希望使用replaceChildinsertBefore进行交换。一旦交换完成'正确',拖放将在交换后继续工作。