PLANTEAMIENTO:
Intento hacer un div
el cual se pueda arrastrar y cambiar posiciones con otros (si le pongo en el segundo lugar, que todos los div
siguientes bajen un puesto).
Estoy utilizando el atributo draggable
.
<div class="box-power dragOver">
<label class="lbl-tmp-crd" contenteditable='true' data-name="labe_power">PRECIOS POR POTENCIA</label>
<div class="moove" draggable="true">
<input type="text" name="t_power" style="width:40px"/>
<input type="text" name="v_power"/>
<button type="button" class="btn-event-disAble">X</button>
<div style="width: 20px;height: 30px;background-color:#BFFF00;float:right;"></div>
</div>
</div>
PROBLEMAS:
Pongo un ejemplo con imágenes:
- El fondo rojo representa dónde puede ser arrastrado el elemento
draggable
- El fondo verde es el selector de todo el
div
que contiene losinputs
. Osea, toda la línea. - Cuando es arrastrado y soltado dentro de un
input
, este se rellena con el valor de laclass
(moove) - Cuando lo arrastro a un
button
, comienza una búsqueda delbrowser
[imagen 2] - No cambia de posición con ningún otro
div
[imagen 3]
CODIGO DE EJEMPLO:
(Se que el CSS molesta, pero es para una mejor visualización del proyecto)
class formLOGOSTariff{
constructor(id, idtxt, params){
var temCard = document.querySelector("#temp-card").innerHTML;
var temPower = document.querySelector("#temp-power").innerHTML;
var temEnergy = document.querySelector("#temp-energy").innerHTML;
var temForm = document.querySelector("#temp-form").innerHTML;
this.id = id;
this.idtxt = idtxt;
let foorm = document.createElement('div');
foorm.innerHTML = temForm;
document.getElementById(id).appendChild(foorm);
this.contentForm = foorm.querySelector(".content-form");
foorm.querySelector(".btn-event-addFrm").addEventListener("click",()=>{
this.addFrm();
});
foorm.querySelector(".btn-event-sndFrm").addEventListener("click", ()=>{
this.sndFrm();
});
foorm.querySelector(".btn-event-delFrm").addEventListener("click", ()=>{
this.delFrm();
});
let card = this.addFrm();
document.body.querySelector('.btn-event-sndTo').addEventListener("click", ()=>{
this.sndTo();
});
foorm.querySelector(".btn-event-disAble").addEventListener("click", (e)=>{
this.disAble(e);
});
var txtare = document.getElementById(this.idtxt);
txtare.addEventListener("keyup", ()=>{
if (!txtare.value){}
else{
this.sndTo();
}
});
for (let i in params){
var hdninpt = document.createElement('input');
hdninpt.type = 'hidden';
hdninpt.name = i;
hdninpt.value = params[i];
foorm.querySelector('form').appendChild(hdninpt);
};
}
addPower(el) {
var temPower = document.querySelector("#temp-power").innerHTML;
let power = document.createElement("div");
power.innerHTML = temPower;
el.querySelector(".container-power").appendChild(power);
power.querySelectorAll(".lbl-tmp-crd").forEach(item=>{
item.addEventListener("keyup", ()=>{
this.sndFrm();
});
});
el.querySelectorAll("label[data-name=labe_power]").forEach((item,index)=>{
if(index>0){
item.remove();
}
});
power.querySelectorAll("input[name=t_power]").forEach(item=>{
item.addEventListener("keyup", ()=>{
this.sndFrm();
});
});
power.querySelectorAll("input[name=v_power]").forEach(item=>{
item.addEventListener("keyup", ()=>{
this.sndFrm();
});
});
power.querySelector(".btn-event-disAble").addEventListener("click", (e)=>{
this.disAble(e);
});
power.querySelector(".moove").addEventListener("dragstart", function onDragStart(event){
event.dataTransfer.setData('text/plain', event.target.className);
});
power.querySelector('.dragOver').addEventListener("dragover", function onDragOver(event){
event.preventDefault();
});
power.querySelector('.dragOver').addEventListener("drop", function onDrop(event){
const className = event.dataTransfer.getData('text');
const draggableElement = power.querySelector('.moove');
const dropzone = event.target;
dropzone.appendChild(draggableElement);
event.dataTransfer.clearData();
});
return power;
}
addEnergy(el) {
var temEnergy = document.querySelector('#temp-energy').innerHTML;
let energy = document.createElement('div');
energy.innerHTML = temEnergy;
el.querySelector('.container-energy').appendChild(energy);
energy.querySelectorAll("label[data-name=labe_energy]").forEach((item,index)=>{
item.addEventListener("keyup", ()=>{
this.sndFrm();
});
});
el.querySelectorAll("label[data-name=labe_energy]").forEach((item,index)=>{
if(index>0){
item.remove();
}
});
energy.querySelectorAll("input[name=t_energy]").forEach(item=>{
item.addEventListener("keyup", ()=>{
this.sndFrm();
});
});
energy.querySelectorAll("input[name=v_energy]").forEach(item=>{
item.addEventListener("keyup", ()=>{
this.sndFrm();
});
});
energy.querySelector(".btn-event-disAble").addEventListener("click", (e)=>{
this.disAble(e);
});
return energy;
}
addFrm() {
var tmp = document.querySelector('#temp-card').innerHTML;
var cont = this.contentForm;
let frm = document.createElement('div');
frm.innerHTML = tmp;
cont.appendChild(frm);
frm.querySelectorAll(".lbl-tmp-crd").forEach(item=>{
item.addEventListener("keyup", ()=>{
this.sndFrm();
});
});
frm.querySelectorAll(".name_tarif").forEach(item=>{
item.addEventListener("keyup", ()=>{
this.sndFrm();
});
});
frm.querySelectorAll(".btn-event-addPower").forEach(item=>{
item.addEventListener("click", ()=>{
this.addPower(frm);
});
})
frm.querySelectorAll(".btn-event-addEnergy").forEach(item=>{
item.addEventListener("click", ()=>{
this.addEnergy(frm);
});
})
this.addPower(frm);
this.addEnergy(frm);
return frm;
}
sndFrm() {
var jotason = [];
this.contentForm.querySelectorAll(".templatecARD").forEach(form=>{
let obj = {
title : form.querySelector(".name_tarif").value
};
let lbl = {};
form.querySelectorAll(".lbl-tmp-crd").forEach((inpt, index)=>{
var ob = lbl[index]||{};
ob.type=inpt.innerHTML;
lbl[index]=ob;
});
let power = {};
form.querySelectorAll("input[name=t_power]").forEach((inpt, index)=>{
var ob = power[index]||{};
ob.type=inpt.value;
power[index]=ob;
});
form.querySelectorAll("input[name=v_power]").forEach((inpt, index)=>{
var ob = power[index]||{};
ob.value=inpt.value;
power[index]=ob;
});
let energy = {};
form.querySelectorAll("input[name=t_energy]").forEach((inpt, index)=>{
var oj = energy[index]||{};
oj.type=inpt.value;
energy[index]=oj;
});
form.querySelectorAll("input[name=v_energy]").forEach((inpt, index)=>{
var oj = energy[index]||{};
oj.value=inpt.value;
energy[index]=oj;
});
obj.lbl = lbl;
obj.power = power;
obj.energy = energy;
jotason.push(obj);
})
var jsoned = JSON.stringify(jotason,undefined, 2);
document.getElementById(this.idtxt).value=jsoned;
}
sndTo(){
this.contentForm.innerHTML='';
let pJsn = document.getElementById(this.idtxt).value;
var dat = JSON.parse(pJsn);
for(let n in dat){
(form=>{
let formDv = this.addFrm();
formDv.querySelector(".container-power").innerHTML='';
for(let n1 in form.power){
(pow=>{
let power = this.addPower(formDv);
power.querySelector(".lbl-tmp-crd").innerHTML=form.lbl[1];
console.log(form.lbl[1]);
power.querySelector("[name=t_power]").value=pow.type;
power.querySelector("[name=v_power]").value=pow.value;
})(form.power[n1])
}
formDv.querySelector(".container-energy").innerHTML='';
for(let n2 in form.energy){
(eng=>{
let energy = this.addEnergy(formDv);
energy.querySelector(".lbl-tmp-crd").innerHTML=form.lbl[2];
console.log(form.lbl[2]);
energy.querySelector("[name=t_energy]").value=eng.type;
energy.querySelector("[name=v_energy]").value=eng.value;
})(form.energy[n2])
}
formDv.querySelector(".name_tarif").value=form.title;
formDv.querySelector(".lbl-tmp-crd").innerHTML=form.lbl[0];
console.log(form.lbl[0]);
})(dat[n]);
}
}
delFrm(){
var nm = this.contentForm.getElementsByClassName("templatecARD").length -1;
var cont = this.contentForm.getElementsByClassName("templatecARD")[nm];
if (nm > 0){
if(confirm('¿Quieres borrarlo')){
cont.remove();
} else {}
} else {}
}
disAble(e){
var tag = e.target;
var lbl = tag.previousElementSibling;
if (lbl.disabled){
lbl.removeAttribute('disabled');
lbl.previousElementSibling.removeAttribute('disabled');
} else {
lbl.disabled = true;
lbl.previousElementSibling.disabled = true;
}
}
}
window.addEventListener("load",()=>{
var nomVre1 = new formLOGOSTariff("test-1", "test-atex-1", {key:100});
var nomVre2 = new formLOGOSTariff("test-2", "test-atex-2", {key:202});
var nomVre3 = new formLOGOSTariff("test-3", "test-atex-3", {key:323});
var nomVre4 = new formLOGOSTariff("test-4", "test-atex-4", {key:575});
});
form{
float: left;
}
.templatecARD{
width: auto;
height: auto;
border: 1px solid #000;
margin: 15px;
}
.jsn_edit{
width: 350px;
margin-top: 14px;
float: left;
}
textarea{
margin-bottom: 10px;
}
.dv-content{
width: 800px;
height: auto;
float: left;
}
.test-atex{
width: 300px;
height: 300px;
background-color:#F5F5F5;
}
.dragOver{
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<title>LOGOS Energía</title>
<meta charset="UTF-8"/>
<script src="app.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- TEMPLATES -->
<!-- TEMPLATES -->
<!-- TEMPLATES -->
<template id="temp-card">
<div class="templatecARD" data-group="0" >
<label class="lbl-tmp-crd" contenteditable='true' data-name="label_gruop">Tarifa</label>
<input type="text" class="name_tarif" name="tarif"/>
<button type="button" class="btn-event-disAble">X</button>
<div>
<div class="container-power"></div>
<button class="btn-event-addPower" type="button">+</button>
</div>
<div>
<div class="container-energy" ></div>
<button class="btn-event-addEnergy" type="button">+</button>
</div>
</div>
</template>
<!-- TEMPLATES -->
<!-- TEMPLATES -->
<!-- TEMPLATES -->
<template id="temp-power">
<div class="box-power dragOver">
<label class="lbl-tmp-crd" contenteditable='true' data-name="labe_power">PRECIOS POR POTENCIA</label>
<div class="moove" draggable="true">
<input type="text" name="t_power" style="width:40px"/>
<input type="text" name="v_power"/>
<button type="button" class="btn-event-disAble">X</button>
<div style="width: 20px;height: 30px;background-color:#BFFF00;float:right;"></div>
</div>
</div>
</template>
<!-- TEMPLATES -->
<!-- TEMPLATES -->
<!-- TEMPLATES -->
<template id="temp-energy">
<div class="box-energy" >
<label class="lbl-tmp-crd" contenteditable='true' data-name="labe_energy">PRECIOS POR ENERGÍA</label>
<div>
<input type="text" name="t_energy" style="width:40px"/>
<input type="text" name="v_energy"/>
<button type="button" class="btn-event-disAble">X</button>
</div>
</div>
</template>
<!-- TEMPLATES -->
<!-- TEMPLATES -->
<!-- TEMPLATES -->
<!-- FORMULARIO -->
<!-- FORMULARIO -->
<!-- FORMULARIO -->
<template id="temp-form">
<form method="post">
<div class="content-form">
</div>
<div>
<button class="btn-event-sndFrm" type="button">UPDATE TEXTAREA</button>
<button class="btn-event-addFrm" type="button" >+</button>
<button class="btn-event-delFrm" type="button">-</button>
</div>
</form>
</template>
<!-- FORMULARIO -->
<!-- FORMULARIO -->
<!-- FORMULARIO -->
<div class="dv-content">
<div id="test-1"></div>
<textarea id="test-atex-1" class="test-atex"> </textarea>
<button class='btn-event-sndTo' type="button">UPDATE FORM</button>
</div>
<div class="dv-content">
<div id="test-2"></div>
<textarea id="test-atex-2" class="test-atex"> </textarea>
<button class='btn-event-sndTo' type="button">UPDATE FORM</button>
</div>
<div class="dv-content">
<div id="test-3"></div>
<textarea id="test-atex-3" class="test-atex"> </textarea>
<button class='btn-event-sndTo' type="button">UPDATE FORM</button>
</div>
<div class="dv-content">
<div id="test-4"></div>
<textarea id="test-atex-4" class="test-atex"> </textarea>
<button class='btn-event-sndTo' type="button">UPDATE FORM</button>
</div>
</body>
</html>