У меня есть два Span блока, куда я перетаскиваю текст. Кнопка Add добавляет новые Span блоки, но в них не удается перетаскивать текст. Помогите понять почему не работает Drag&Drop для новых блоков. Первый файл jsp: | Код |
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript" src="../js/init.js"></script>
<style>
.textBlock {
color: white;
font-weight: bold;
background-color: #0F3764;
border-bottom: 2px solid #0F3764;
border: solid 1px #cecece;
width: auto;
position: static;
margin: 1px 2px 1px 2px;
padding: auto;
text-align: center;
}
.folgt {
border: 2px solid #0F3764;
margin: 1px 2px 1px 2px;
padding: auto;
height: 20px;
width: 130;
background-color: #rrr;
text-align: center;
}
.dropHere {
background-color: #000000;
}
</style>
<span class="textBlock">Text1</span>
<span class="textBlock">Text2</span>
<span class="textBlock">Text3</span>
<span class="textBlock">Text4</span>
<script language="JavaScript" type="text/javascript">
var textId = 2;
function addInput(btn)
{
var container = btn.parentElement;
var div = document.createElement("div");
div.id = "div" + textId;
var first = document.createElement("<span class=\"folgt\">" + textId + "</span>");
var middle = document.createElement("<span class=\"folgt\">" + textId + "</span>");
var btn = document.createElement("INPUT");
btn.type = "button";
btn.value = "Delete";
btn.onclick = new Function("document.getElementById(\"" + div.id + "\").removeNode(true);");
div.appendChild(first);
div.appendChild(middle);
div.innerHTML += " ";
div.appendChild(btn);
container.appendChild(div);
textId++;
}
</script>
<form action="page2.jsp" method="POST">
<span class="folgt"></span><span class="folgt"></span>
<input type="button" value="Add" onclick="addInput(this);">
<br />
</form>
|
-------------------------------------------- для перетаскивания я использую плагин jQuery, init.js --------------------------------------------- | Код |
$(function() {
$( '.drag' ).draggable({ helper:'clone' });
$('.textBlock').draggable({
helper:'clone'
});
$('.folgt').droppable({
hoverClass: 'dropHere'
,drop: function(event, ui) {
$(this).append($( '<span>' + ui.draggable.html()+ '</span>'));
}
});
});
|
Подскажите, что я не так делаю? |
Помогите с Drag&Drop для новых Элементов 
Загрузка ...
