Hello,
I'm new here and looking forward to learn a lot from you all.
I've been making this jQuery app lately for a friend and I'm facing some issues for which I haven't found a solution yet. Let me add a picture here so things are clear,
This is how it looks. The functions it should be able to do is,
1. Dragging containers to canvas multiple times. As soon as the container is dropped, it forms a small icon inside it and expands to be able to place an item into it.
2. Items can be dragged and dropped into the expanded container multiple times. The container goes on expanding as more and more items are dropped.
3. The containers (containing the items) should be sortable i.e. their positions can be sorted later.
4. The items inside the containers should be sortable
Now, I've succeeded in getting the first functionality. I also place the item in the container successfully. But, as soon as I add a second item, it goes out of the container. I want to keep it in the container and automatically expand the container to take it inside. Here is the picture of what happens,
As seen above, the second item jumps out.
Apart from this, I'm also not sure how to add a sortable functionality to dropped containers and items. I've tried using .sortable() but it does not work properly. It disorients the dropped boxes.
Would be great if some gurus out here could help me on this.
Given below is the code which I'm using. Let me know if you need additional information on this.
-
$(function() {
$(".container").draggable({
revert: "invalid",
opacity: 0.6,
helper: "clone",
cursor: "move"
});
$(".item").draggable({
revert: "invalid",
opacity: 0.6,
helper: "clone",
cursor: "move"
});
$("#canvas").droppable({
accept: ".container",
over: function(event, ui) {
$(ui.helper).animate({width: "150px", height: "150px"});
},
drop: function(event, ui) {
$(ui.draggable).addClass("droppedContainer"
).html("<p style=\"line-height:2em; display:inline-block;\" class=\"dropContainerP\">Container1</p><div id=\"icon\" class=\"box-style icon\"><p>icon</p><p> </p></div>"
).clone(
).appendTo("#canvas").droppable({
accept: ".item",
over: function(event, ui) {
},
drop: function(event, ui) {
$(ui.draggable).addClass("droppedItem"
).clone(
).appendTo(".droppedContainer");
$(ui.draggable).removeClass("droppedItem");
}
});
$(ui.draggable).removeClass("droppedContainer"
).html("<p style=\"line-height:2em;\">Container1</p><p>icon</p>");
},
out: function(event, ui) {
$(ui.helper).animate({width: "65px", height: "65px"});
}
});
});