拖放添加到另一个div中的div
[英]Drag and drop a div added into another div
问题描述
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 . 注意，各节为divs 。
Problem 问题
I am not able to drag the note to the other section or div. 我无法将注释拖到其他部分或div。 the note is draggable in its own section (div). 该注释可在其自己的区域（div）中拖动。 Please help me with the solution so that it can be moved to other section. 请为我提供解决方案，以便可以将其移至其他部分。
Here is my HTML code: 这是我的HTML代码：
<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 这是我的.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 个解决方案
解决方案1
0 2013-12-19 07:24:47
You can try this :- 您可以尝试：-
$("#rightDiv").droppable({
accept: '.draggableObject',
});
解决方案2
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);<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css">部分{背景：rgba（0，0，0，.1）; padding: 20px;</style> </head> <body> <script>window.onload = function(){ var count=0;</style> </head> <body> <script>window.onload = function（）{var count = 0; var myDiv=document.getElementById('myDiv');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 draggable="true" id="myDiv">拖动区域。</div><div id="targetDiv">Target Area.</div><div id="targetDiv">目标区域。</div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.