Drag and Drop
Задача такая: есть перетаскиваемые объекты и принимающий div. Перетаскивание происходит клона, а не самого элемента и добавляется в принимающий div методом .appendTo, а как можно сделать чтоб при добавлении он не вставал в конец или в начало (другим методом), а оставался там, куда его положили. Тоесть если я перетаскиваемый элемент ложу в центр div то он там и остается, и при этом откуда я его перетаскивал должен остаться оригинал объекта.
вобще возможно ли так сделать? У меня получился вот такой замудренный код.
// перетаскивание
$('div[id*=element]').draggable({
containment: "#wraper",
revert: "invalid",
grid: [20, 20],
opacity: 0.5,
scroll: false,
zIndex: 35,
appendTo: "body",
helper: "clone",
cursor: "move",
stack: "div[id*=element] > img"
}).find('img').css({
'width': '50%',
'height': '50%'
});
//приемник
$("#contener").droppable({
accept: "#saitbar > #left > #accordion > .dropp > div[id*=element]",
activeClass: "ui-state-highlight",
drop: function (event, ui) {
var element = $(ui.draggable);
element.fadeIn(1000, function () {
$(this).clone()
.addClass("newElement")
.appendTo("#contener")
.draggable({
containment: "#contener",
opacity: 0.5,
stack: "div[id*=element]",
cursor: "move"
})
.resizable({
containment: "#contener",
/*aspectRatio:true*/
})
.find('img').animate({
'width': '100%',
'height': '100%'
}, 100)
});
|
|
к сожелению нет. Принимающий div может быть разного размера и когда в него ложат картинку она должна остоваться там куда её положили.
|
Цитата:
|
draggable droppable клонирование блоков
dmivasant,
Вариант решения ... Цитата:
-10 коррекция margin
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>demo</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style type='text/css'>
.wrapper{margin:20px auto}
#block1,#trash{border:solid 1px #555555;margin:10px;padding:20px;-moz-border-radius:5px;-webkit-border-radius:5px;float:left;height:335px ;min-width:100px}
.textBlock{cursor: pointer;border:solid 1px #333333;font-weight:bold;margin:10px 0 5px 0;padding:10px;text-align:center;background:#eee;-moz-border-radius:3px;-webkit-border-radius:3px}
#trash{padding:0px;
width:335px;height:335px ;
background-color: #4169E1;
}
#trash div{
width:40px;height:40px ;
background-color: #DEB887;
position: absolute;
}
</style>
<script type='text/javascript'>
$(window).load(function () {
$("#block1 .textBlock").draggable({
helper: "clone",
appendTo: "#trash"
});
$("#trash").droppable({
accept: "#block1 .textBlock",
drop: function (event, ui) {
var element = $(ui.draggable).clone();
element.css({"top": $(ui.helper).offset().top - 10, "left":$(ui.helper).offset().left})
element.appendTo("#trash")
element.draggable({ containment:"#trash", scroll:false });
}
})
});
</script>
</head>
<body>
<div class="wrapper">
<div id="block1" class="">
<div class="textBlock ui-state-default">Блок 1</div>
<div class="textBlock ui-state-default">Блок 2</div>
<div class="textBlock ui-state-default">Блок 3</div>
<div class="textBlock ui-state-default">Блок 4</div>
<div class="textBlock ui-state-default">Блок 5</div>
<div class="textBlock ui-state-default">Блок 6</div>
</div>
<div id="trash" class=""></div>
</div>
</body>
</html>
|
Да ну, лучше Drag & Drop на чистом JS делать, а то юзать jQuery методы при каждом событии mousemove совсем не сахар.
|
огромное спасибо, очень помогли.
|
Почемуто в моем случаи не работает:( . я поня что нужная мне строчка .css({"top": $(ui.helper).offset().top - 10, "left":$(ui.helper).offset().left}) но она отбрасывает перетаскиваемый элемент в право и вниз пикселей на 100. Почему так происходит?
|
dmivasant,
делайте макет с вашим html и css,js. |
dmivasant,
19 строка --- укажите position: absolute новым блокам или добавьте в 32 строку |
| Часовой пояс GMT +3, время: 06:20. |