Drag e Drop effetto move fuori e dentro un div container

[max1974]

Salve con il codice che segue ho il seguente problema....
Come avrete notato ci sono 3 div draggable="true" e sono
i 3 div "class=widget" li draggo tra loro con lo script sotto e fin qui tutto ok???
gradirei che quando il DRAG2 o il DRAG3 li mando al posto del DRAG1 (ossia all'interno del div "class=widget-body" questo divenisse "display:none;" e al contrario quando il DRAG1 va al posto del DRAG2 o del DRAG3 si posiziona in "display:block;")
Cosa devo cambiare???

///*****INIZIO CODICE HTML *****////
<div id="widgets" class="container-body">
<div class="widget-body">
<header><span>Widgets</span></header>
<div id="Div1" class="widget-main" style="display:block;">
<div class="widget" draggable="true">
<header><span>DRAG1</span></header>
<div id="Div2" class="widget-main" style="display:none;">box4</div>
</div>
</div>
</div>
<div class="widget" draggable="true">
<header><span>DRAG2</span></header>
<div id="Div3" class="widget-main" style="display:block;">box5</div>
</div>
<div class="widget" draggable="true">
<header><span>DRAG3</span></header>
<div id="Div4" class="widget-main" style="display:block;">box5</div>
</div>
</div>
///*****FINE CODICE HTML *****////
///*****INIZIO CODICE JS DRAG - DROP ****////
(function () {
var id_ = 'widgets';
var widgets_ = document.querySelectorAll('#' + id_ + ' .widget');
var dragSrcEl_ = null;

this.handleDragStart = function (e) {
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/html', this.innerHTML);
dragSrcEl_ = this;
this.style.opacity = '0.5';
// this/e.target is the source node.
this.addClassName('moving');
};

this.handleDragOver = function (e) {
if (e.preventDefault) {
e.preventDefault(); // Allows us to drop.
}
e.dataTransfer.dropEffect = 'move';
return false;
};
this.handleDragEnter = function (e) {
this.addClassName('over');
};

this.handleDragLeave = function (e) {
// this/e.target is previous target element.
this.removeClassName('over');
};

this.handleDrop = function (e) {
// this/e.target is current target element.

if (e.stopPropagation) {
e.stopPropagation(); // stops the browser from redirecting.
}

// Don't do anything if we're dropping on the same box we're dragging.
if (dragSrcEl_ != this) {
dragSrcEl_.innerHTML = this.innerHTML;
this.innerHTML = e.dataTransfer.getData('text/html');
}

return false;
};

this.handleDragEnd = function (e) {
// this/e.target is the source node.
this.style.opacity = '1';
[].forEach.call(widgets_, function (widget) {
widget.removeClassName('over');
widget.removeClassName('moving');
});
};

[].forEach.call(widgets_, function (widget) {
widget.setAttribute('draggable', 'true'); // Enable boxes to be draggable.
widget.addEventListener('dragstart', this.handleDragStart, false);
widget.addEventListener('dragenter', this.handleDragEnter, false);
widget.addEventListener('dragover', this.handleDragOver, false);
widget.addEventListener('dragleave', this.handleDragLeave, false);
widget.addEventListener('drop', this.handleDrop, false);
widget.addEventListener('dragend', this.handleDragEnd, false);

});
})();

[carlomarx]

1. Non ho capito.
2. L'attributo "draggable" non è un attributo HTML valido.
3. Vedi se quest'esempio ti può esser d'aiuto: https://mdn.mozillademos.org/files/5..._elements.html (vedi anche l'articolo di riferimento).

[max1974]

la funzione drag che ho messo funziona benissimo.
l'unica cosa che vorrei in piu come sopra descritto (forse male),
controllare dove sto facendo il dnd ossia nome del div che drag e nome del div dove arriva...
OK???

[max1974]

Risolto in parte :
cosi rieco a sapere quali sono i 2 div che vengono mossi ossia quello che parte e quello che arriva e di conseguenza sostituito, ma a me iteressava maggiormente sapere quando entra nel div <div class="widget-body">
in partenza
this.handleDragStart = function (e) {
var DivPartenza = document.getElementById(this.getElementsByClassNam e('widget-main')[0].id);
DivPartenza.style.display = "none";
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/html', this.innerHTML);
dragSrcEl_ = this;
this.style.opacity = '0.5';
// this/e.target is the source node.
this.addClassName('moving');
};
this.handleDrop = function (e) {
// this/e.target is current target element.
var DivArrivo= document.getElementById(this.getElementsByClassNam e('widget-main')[0].id);
DivArrivo.style.display = "none";
if (e.stopPropagation) {
e.stopPropagation(); // stops the browser from redirecting.
}

// Don't do anything if we're dropping on the same box we're dragging.
if (dragSrcEl_ != this) {
dragSrcEl_.innerHTML = this.innerHTML;
this.innerHTML = e.dataTransfer.getData('text/html');
}

return false;
};