Проблема с перетаскиванием HTML

Я пытаюсь создать элемент формы 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>

Теперь мой вопрос, когда я хочу, чтобы изменить упали элементы, особенно, когда вы падаете, например опцию #-1 на #option 2, у меня есть неожиданный выход. Вместо # # варианта # после # option-2 он помещает # option-1 в # option-2, а скрытые поля ввода получают странные значения. Может кто-нибудь, пожалуйста, помогите мне?

источник

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-from on # drop-form отлично работает. Удаление элементов из # drop-on на _elements in_ # drop-form не работает. Как я могу сделать так, чтобы элементы только отбрасывались на div, а не на элементы в div? –

Проблема с перетаскиванием HTML

ответ

Смежные вопросы