HTMLのドラッグアンドドロップの問題

私は、ユーザが4つのものを順に並べることを可能にするHTMLフォーム要素を作ろうとしています。たとえば、私は自分の好きな動物が何であるかをユーザに尋ね、それを整理したいと思う。HTMLのドラッグアンドドロップの問題

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<script> 
function allowDrop(ev) { 
    ev.preventDefault(); 
} 

function drag(ev) { 
    ev.dataTransfer.setData("text", ev.target.id); 
} 

function drop(ev) { 
    ev.preventDefault(); 
    var data = ev.dataTransfer.getData("text"); 
    ev.target.appendChild(document.getElementById(data)); 
    updateOrder(ev.target.id); 

} 

function updateOrder(id) { 
    var w = document.getElementById(id); 
    for (var i = 0; i < w.childNodes.length; i++) { 
    var node = w.childNodes[i]; 
    document.getElementById('order-'+i).value=node.id; 
    } 
} 
</script> 
</head> 
<body> 

<div class="container"> 
    <h2>Vertical (basic) form</h2> 
    <form role="form"> 
    <div class="form-group"> 
     <label for="order">Put in order:</label> 
     <input type="hidden" name="order-1" id="order-0" value=""> 
     <input type="hidden" name="order-2" id="order-1" value=""> 
     <input type="hidden" name="order-3" id="order-2" value=""> 
     <input type="hidden" name="order-4" id="order-3" value=""> 
<div style="border: 1px dashed #ddd; padding: 0.5em; min-height: 2em; margin-bottom: 4px;" ondrop="drop(event)" ondragover="allowDrop(event)" id="drop-from" placeholder="Pak hier de opties"> 
<div draggable="true" ondragstart="drag(event)" style="float: left;" id="option-1" class="label label-default">Optie 1</div> 
<div draggable="true" ondragstart="drag(event)" style="float: left;" id="option-2" class="label label-default">Optie 2</div> 
<div draggable="true" ondragstart="drag(event)" style="float: left;" id="option-3" class="label label-default">Optie 3</div> 
<div draggable="true" ondragstart="drag(event)" style="float: left;" id="option-4" class="label label-default">Optie 4</div> 
</div> 
<div class="form-control" ondrop="drop(event)" ondragover="allowDrop(event)" id="drop-form" placeholder="sleep ze in de juiste volgorde hier naartoe"></div> 
    </div> 
    <button type="submit" class="btn btn-default">Submit</button> 
    </form> 
</div> 

</body> 
</html>

は今、私は再配置したいときに、#option 2上の例の＃オプション-1のためにドロップし、私が疑われていない出力を持っている場合は特に、要素を落としたというのが私の問題です。＃option-2の後に＃option-1を移動するのではなく、＃option-1に＃option-1を置き、隠れた入力フィールドに奇妙な値を付けます。誰かが私を助けてくれますか？

出典

2016-07-13 FJ-web

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<script> 
function allowDrop(ev) { 
    ev.preventDefault(); 
} 

function drag(ev) { 
    ev.dataTransfer.setData("text", ev.target.id); 
} 

function dropOrder(ev) { 
    ev.preventDefault(); 

    var data = ev.dataTransfer.getData("text"); 
    if (ev.target === document.getElementById('drop-from') || ev.target === document.getElementById('drop-to')) { 
    ev.target.appendChild(document.getElementById(data)); 
    } 
    else { 
    ev.target.parentNode.insertBefore(document.getElementById(data), ev.target.nextSibling) 
    } 
    updateOrder(); 
} 

function updateOrder() { 
    var w = document.getElementById('drop-to'); 
    var children = w.getElementsByTagName('div'); 
    for (var i = 0; i < children.length; i++) { 
    var node = children[i]; 
    document.getElementById('order-'+i).value=node.id; 
    } 
} 
</script> 
</head> 
<body> 

<div class="container"> 
    <h2>Vertical (basic) form</h2> 
    <form role="form"> 
    <div class="form-group"> 
     <label for="order">Put in order:</label> 
     <input type="text" name="order-1" id="order-0" value=""> 
     <input type="text" name="order-2" id="order-1" value=""> 
     <input type="text" name="order-3" id="order-2" value=""> 
     <input type="text" name="order-4" id="order-3" value=""> 
<div style="border: 1px dashed #ddd; padding: 0.5em; min-height: 2em; margin-bottom: 4px;" ondrop="dropOrder(event)" ondragover="allowDrop(event)" id="drop-from" placeholder="Pak hier de opties"> 
<div draggable="true" ondragstart="drag(event)" style="float: left;" id="option-1" class="label label-default">Optie 1</div> 
<div draggable="true" ondragstart="drag(event)" style="float: left;" id="option-2" class="label label-default">Optie 2</div> 
<div draggable="true" ondragstart="drag(event)" style="float: left;" id="option-3" class="label label-default">Optie 3</div> 
<div draggable="true" ondragstart="drag(event)" style="float: left;" id="option-4" class="label label-default">Optie 4</div> 
</div> 
<div class="form-control" ondrop="dropOrder(event)" ondragover="allowDrop(event)" id="drop-to" placeholder="sleep ze in de juiste volgorde hier naartoe"></div> 
    </div> 
    <button type="submit" class="btn btn-default">Submit</button> 
    </form> 
</div> 

</body> 
</html>

出典

2016-07-21 14:43:31

コードに問題があります。それを確認してください。

function allowDrop(ev) { 
 
    ev.preventDefault(); 
 
} 
 

 
function drag(ev) { 
 
    ev.dataTransfer.setData("text", ev.target.id); 
 
} 
 

 
var dropFrom = document.getElementById('drop-from'); 
 
function drop(ev) { 
 
    ev.preventDefault(); 
 

 
    var data = ev.dataTransfer.getData("text"); 
 
    if (ev.target === dropFrom) { 
 
    ev.target.appendChild(document.getElementById(data)); 
 
    } 
 
    else { 
 
    ev.target.parentNode.insertBefore(document.getElementById(data), ev.target.nextSibling) 
 
    } 
 
    updateOrder(ev.target.id); 
 
} 
 

 
function updateOrder(id) { 
 
    var w = document.getElementById('drop-from'); 
 
    var children = w.getElementsByTagName('div'); 
 
    for (var i = 0; i < children.length; i++) { 
 
    var node = children[i]; 
 
    document.getElementById('order-'+i).value=node.id; 
 
    } 
 
}

<form role="form"> 
 
    <div class="form-group"> 
 
    <label for="order">Choose your favorite animals and put it in order:</label> 
 
    <input type="hidden" name="order-1" id="order-0" value=""> 
 
    <input type="hidden" name="order-2" id="order-1" value=""> 
 
    <input type="hidden" name="order-3" id="order-2" value=""> 
 
    <input type="hidden" name="order-4" id="order-3" value=""> 
 
    <div style="border: 1px dashed #ddd; padding: 0.5em; min-height: 2em; margin-bottom: 4px;" ondrop="drop(event)" ondragover="allowDrop(event)" id="drop-from" placeholder="Pak hier de opties"> 
 
     <div draggable="true" ondragstart="drag(event)" style="float: left;" id="option-1" class="label label-default">Horse</div> 
 
     <div draggable="true" ondragstart="drag(event)" style="float: left;" id="option-2" class="label label-default">Dog</div> 
 
     <div draggable="true" ondragstart="drag(event)" style="float: left;" id="option-3" class="label label-default">Cat</div> 
 
     <div draggable="true" ondragstart="drag(event)" style="float: left;" id="option-4" class="label label-default">Cow</div> 
 
    </div> 
 
    <div class="form-control" ondrop="drop(event)" ondragover="allowDrop(event)" id="drop-form" placeholder="sleep ze in de juiste volgorde hier naartoe"></div> 
 
    </div> 
 
    <button type="submit" class="btn btn-default">Submit</button> 
 
</form>

出典

2016-07-13 13:18:23

コードを分割で間違った何かがありました。今度は一度にコード全体です。それは動作するはずです。 –

私は理解していませんでした。 –

＃drop-formの＃drop-fromの要素を削除すると効果的です。 _elements in_＃drop-formの＃drop-fromの要素をドロップすると機能しません。どのように私はそれを作ることができます要素はdivの要素ではなく、divの要素にドロップされますか？ –

HTMLのドラッグアンドドロップの問題

答えて

関連する問題