Я кодировал это для реализации перетаскивания и придумал это, в этом есть несколько глюков:
- Невозможно правильно переместить элемент, если я перемещаю второй, он всегда перемещаетсяпервый
- Я открыт для использования
jquery или пользовательского интерфейса, потому что я хочу создать кликабельный код для элементов в столбцах, чтобы я мог открыть colorbox, чтобы открыть его при необходимости
Вот мой код:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link rel="stylesheet" href="assets/colorbox.css"/>
<script src="//code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="assets/jquery.colorbox-min.js"></script>
<style>
#div1, #div2,#div3,#div4,#div5,#div6 {
float: left;
width: 180px;
height: 70vh;
margin: 1px;
padding: 10px;
border: 1px solid black;
background:#ccc;
}
</style>
</head>
<body>
<h2>Drag and Drop</h2>
<div><a href="javascript:;" class="openlead" data-url="addlead.php">Add New Lead</a></div>
<hr/>
<div class="container">
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<div draggable="true" ondragstart="drag(event)" id="drag1">boo</div> <hr>
<div draggable="true" ondragstart="drag(event)" id="drag1">K</div> <hr>
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
<div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
<div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
<div id="div6" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
</div>
</body>
<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));
}
$(document).on('click','.openlead',function() {
$.colorbox({iframe:true, width:"80%", height:"80%", href: $(this).data('url')});
});
</script>
</html>
В коде есть вся страница, которую я кодировал до сих пор, у меня есть 6 столбцов, и я должен иметь возможность перемещаться вперед и назад