Перетащите DIV добавлены в другой DIV

СценарийПеретащите DIV добавлены в другой DIV

Я имею функциональность в моем проекте, в котором мы должны добавить примечание в разделе, а затем он может быть перемещен в других разделах. Это своего рода отслеживание задач. Я могу добавить динамическое создание заметки в один раздел и сделать эту заметку перетаскиваемой. Примечание, разделы: divs.

Проблема

Я не могу перетащить записку в другой раздел или дел. нота перетаскивается в свой раздел (div). Пожалуйста, помогите мне с решением, чтобы его можно было переместить в другой раздел.

Вот мой 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>

Вот мой .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(); 
}

источник

2013-12-19 Anirudh Agarwal

Вы можете попробовать это: -

$("#rightDiv").droppable({ 
accept: '.draggableObject', 
});

источник

2013-12-19 07:24:47 Anup

не работает. –

Пожалуйста, изучите этот пример кода,

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> раздел { фон: rgba (0, 0, 0, .1); обивка: 20px; высота: 350px; margin: 20px 0 0 0; border-radius: 20px; } #myDiv { cursor: move; фон: красный; высота: 150px; ширина: 150шт; float: слева; } #targetDiv { фон: красный; высота: 300px; ширина: 300 пикселей; поплавок: правый; } </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', функция (е) { /* Изменение пользовательского интерфейса, чтобы ясно видеть */ this.style.opacity = 1; this.style.borderStyle = 'твердое' ;>
targetDiv.style.backgroundColor = 'красный';
/* 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"> Перетащить область. </div> <div id="targetDiv"> Целевая область. </div> </body> </html>

источник

2013-12-19 07:49:20

может у вас поместить некоторые комментарии в код –

Перетащите DIV добавлены в другой DIV

ответ

Смежные вопросы