Hello everyone, I have a query related to drag and drop functionality. I am currently working on an application that allows users to create websites using only drag and drop features. I am facing a challenge in implementing a feature where users can drop elements at specific positions and the elements below the dropped element automatically shift down. The issue arises from dynamically generated elements. For example, in the right panel, there are various components displayed as images. When these elements are dragged, certain meta-data is passed along. Upon dropping the element, an HTML element is created based on this meta-data.
<div class="drop-zone">
<div>
<!--container 1-->
</div>
<!-- here I want to drop the dynamically generated element -->
<div>
<!--container 2-->
</div>
</div>
*****************EDIT*****************************
The 'header drop' directive in the code snippet below is used for dragging, while JSONfn serves to stringify functions within JSON objects.
(function(){
define(['../../../../app','./../service/header.factory.js'],function(app){
app.directive('headerDrop',['HeaderFactory',function(HeaderFactory){
return {
restrict: "E",
replace: false,
scope: {},
link: function(scope,element,attrs) {
element.on('dragstart',function(e){
e.originalEvent.dataTransfer.setData("data",JSONfn.stringify(HeaderFactory));
});
},
template: "<img id='header' draggable='true' src='/src/create_template/images/noimage.jpg' width='100' height='100'> </img>"
}
}]);
app.directive('dragContainer',function(){
return {
restrict: "E",
replace: false,
scope: {},
template: "<div id='elements-container'> <h1 style='text-align:center;'> All </h1><header-drop> </header-drop> </div>"
}
});
});
})()
Within the controller:
element.on('drop',function(event){
console.log(event);
if(event.target.className !== "drop-zone"){
event.preventDefault();
return false;
}
var data = JSONfn.parse(event.originalEvent.dataTransfer.getData("data"));
if(data.type=="header"){
var heading = document.createElement("h1");
console.log("client height" , heading.clientWidth);
heading.innerHTML = data.textValue;
heading.style.position = "relative";
heading.style.top = ((event.pageY/window.innerHeight)*100)+ "%";
heading.className = "editable";
event.target.appendChild(heading);
heading.style.top = event.clientY;
addingEvents();
}
});