Drag and drop a div added into another div
Question
Scenario
I am having a functionality in my project in which we have to add a note in a section and then it can be moved to the other sections. It is a sort of task tracking. I am able to add a note dynamically created into one section and have made that note dragable. The note, sections are divs .
Problem
I am not able to drag the note to the other section or div. the note is draggable in its own section (div). Please help me with the solution so that it can be moved to other section.
Here is my HTML code:
<div id="addTaskDiv" style="height: 150px">
<a id="addTask" onclick="AddNote();">ADD Task</a> <a id="a1" onclick="AddText();">Submit</a>
</div>
<div id="MySplitter">
<div id="leftDiv" style="height: 150px; border-style: groove; width: 100%;">
left here
</div>
<div id="splitterUpperDiv">
<div id="midDiv" style="height: 150px; border-style: groove; width: 100%;">
middle here
</div>
<div id="rightDiv" style="height: 150px; width: 100%; border-style: groove;">
right here
</div>
</div>
</div>
Here is my .js
$().ready(function () {
$("#MySplitter").splitter();
$("#splitterUpperDiv").splitter();
$("#rightDiv").droppable();
$("#midDiv").droppable();
$("#leftDiv").droppable();
});
function AddNote(args, seder) {
var i = (typeof this.rel != 'undefined') && (this.rel - 0) == this.rel ? this.rel : 0;
var br = document.createElement("br");
$("#addTaskDiv")[0].appendChild(br);
addArea();
return false;
}
function addArea() {
var i = (typeof this.rel != 'undefined') && (this.rel - 0) == this.rel ? this.rel : 0;
var button = $(this);
var commentField = $('<textarea/>'); // create a textarea element
commentField[0].id = 'added' + i;
commentField
.css({
position: 'absolute',
width: 200, // textbox 200px by 100px
height: 100
})
// set the textarea's value to be the saved content, or a default if there is no saved content
.val(button.data('textContent') || 'This is my comment field\'s text')
// set up a keypress handler on the textarea
.keypress(function (e) {
if (e.which === 13) { // if it's the enter button
e.preventDefault(); // ignore the line break
button.data('textContent', this.value); // save the content to the button
$(this).remove(); // remove the textarea
}
})
.appendTo($("#addTaskDiv")[0]); // add the textarea to the document
}
function AddText() {
var i = (typeof this.rel != 'undefined') && (this.rel - 0) == this.rel ? this.rel : 0;
var a = $("#added0")[0].value;
var x = document.createElement("div");
x.width = '200px';
x.height = 'auto';
x.id = 'lable' + i;
this.rel = i + 1;
x.innerText = a;
var br = document.createElement("br");
$("#leftDiv")[0].appendChild(br);
$("#leftDiv")[0].appendChild(x);
$("#lable" + i + "").draggable();
}
2 answers
solution1
0 2013-12-19 07:24:47
You can try this :-
$("#rightDiv").droppable({
accept: '.draggableObject',
});
solution2
0 2013-12-19 07:49:20
Please study this example code,
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css">section{ background: rgba(0, 0, 0, .1); padding: 20px; height: 350px; margin: 20px 0 0 0; border-radius: 20px; } #myDiv{ cursor: move; background: red; height: 150px; width: 150px; float: left; } #targetDiv{ background: red; height: 300px; width: 300px; float: right; }</style> </head> <body> <script>window.onload = function(){ var count=0; var myDiv=document.getElementById('myDiv'); var targetDiv=document.getElementById('targetDiv');myDiv.addEventListener('dragstart', function(e) { /* change ui to see clearly */ this.style.opacity= 0.2; this.style.borderStyle= 'dashed'; targetDiv.style.backgroundColor= 'yellow'; /* set text from this as an argument to transfer */ e.dataTransfer.setData("Text", this.innerHTML); }, false);myDiv.addEventListener('dragend', function(e) { /* change ui to see clearly */ this.style.opacity=1; this.style.borderStyle= 'solid';>
targetDiv.style.backgroundColor='red';/* change text of dragend div */ this.innerHTML="Total Count : "+ (++count) ; }, false); targetDiv.addEventListener('dragover', function(e) { /* change ui to see clearly */ this.style.backgroundColor='green'; if(e.preventDefault){ e.preventDefault(); }; },false); targetDiv.addEventListener('dragleave', function(e) { /* change ui to see clearly */ this.style.backgroundColor='yellow'; }, false); targetDiv.addEventListener('drop', function(e) { /* get text from dropped div */ this.innerHTML= e.dataTransfer.getData("Text"); if( e.preventDefault ){ e.preventDefault(); }; },false); }
</script>
<div draggable="true" id="myDiv">Drag able Area.</div><div id="targetDiv">Target Area.</div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.