1

I have flexible notepad (or Calendar) like tool on my page. I don't want to use Full Calendar and I can't seem to accomplish one particular functionality to complete my custom project.

I'm probably going to get down voted on this one because I may be to general on my approach (the best starting point), but I'll do my best to ask a real question of value here.

The Question:
Can absolute positioned elements "detect" each other and move down (like JQ UI sortable) when a new element is dropped in the same parent?

I have two or more adjacent cells (parents) (like a Calendar), the "notes" (child elements) have to be absolute position to exceed the width of their parent.

Here is the Generic "staring point":
*My Grid (parents) can be Div or Table. I've managed to get the child elements to extend/overlap beyond the parent to cover multiple adjacent cells. They drop perfect on the droppable area and align top left, but the dropped items don't see each other.

To FullCalander's credit, it does this perfect in the month view:(below)

  • So my issue may be that absolute position is not the way to go
  • Sortable may be the answer, but the child wont exceed the parent width
  • I've tried CSS and read many absolute position articles here at Stack

I have a feeling, my approach is wrong (using absolute) so hopefully the down voters will have mercy on my soul and explain that the answer to my question is "no, they can not" but make a suggestion to improve my approach at this challenge.

enter image description here

$(".droppable").droppable({
    drop: function (event, ui) {
        accept: ".draggable"
        activeClass: "ui-state-hover"
        hoverClass: "ui-state-active"
        $(ui.draggable).offset($(this).offset());
        // $(ui.draggable).data('dropped', true); 
        //var count = $(this).length;
        var currentPos = $(this).position();
        $("#pos").text("CURRENT: \nLeft: " + currentPos.left + "\nTop: " + currentPos.top);

var count = $(this).length;          //wrong child count or absolute not found/counted
var count = $(this).children.length; //wrong child count or absolute not found/counted
        // alert(count);

//this shoud show child count like .length - broken
// var countChild = (document.elementFromPoint(currentPos.top, currentPos.left));
   // alert(countChild);
   // console.log(countChild);   
  }
});

JSFiddle

zzipper72
  • 945
  • 2
  • 10
  • 24

1 Answers1

0

You can make use of document.elementFromPoint

The elementFromPoint() method of the Document interface returns the topmost element at the specified coordinates.

So, in the hover event or similar, you can check whether a target element (an event in your calendar) is already present at the specific coordinates or not. Based on this you can set flags or data on the element being dragged to help to with positioning once it is dropped.

Hopefully my answer here will help you get a better idea on using this.

Community
  • 1
  • 1
T J
  • 42,762
  • 13
  • 83
  • 138
  • This is great and will really work well in a lot other areas! - If I may ask, since my draggables snap to my droppable then set as an absolute, will your solution still detect them or will absolute take them out of the parent and on to the body or page? – zzipper72 Oct 23 '15 at 15:40
  • @zzipper72 My understanding of your issue is, if you drop an event on top of another, you want one of them to move down... If that is correct, while dragging you can check whether element near the current coordinates is an item using `elementFromPoint`. And store some data based on it like `overAnotherEvent = true`. When a drop occurs, check the value of `overAnotherEvent `, if its true you know you dropped it over another event. So you can push the dropped element, or the other element as you wish... – T J Oct 23 '15 at 15:46
  • Thanks for the explaination, I'll try to throw together a Fiddle and post it for other users, I think this is a common issue, there so many Stack posts on absolute position, but none seem to address the overlapping length that requires absolute position. – zzipper72 Oct 23 '15 at 15:49
  • the Fiddle is as close as I can get it, would you mind taking a look? I would greatly appreciate it, and I can marked this answered. – zzipper72 Oct 24 '15 at 13:12