CODEWITHSUNDEEP
jqueryhtmlcsscss-positiondrag
ArunValaven
ArunValaven

Reputation: 1959

Drag and drop not perfectly drops within position relative droppable div

I have three images to drag and drop into droppable div. While dropping the image into droppable div, the image not perfectly dropped. I need the droppable div as position relative. Removing the position properties in droppable div works perfectly. How can I achieve this with position relative?

#droppable {
  position: relative;
  overflow: hidden;
  margin-left: 10%;
  margin-top: 10%;
  width: 800px;
  height: 450px;
  border: 1px solid black;
  background: #EBECED;
  }

My code in Jsfiddle

Upvotes: 0

Views: 770

Answers (2)

ArunValaven
ArunValaven

Reputation: 1959

While append the cloned image into droppable div(with position relative), cloned image gets placed in position (its own position + its parent droppable div offset value), so we need to omit those parent offset values.

Below code works for me..

ClonedImage.appendTo('#droppable');
        
var parentPostion = $('#droppable');
        
var leftAdjust = ClonedImage.position().left - parentPostion.offset().left;
var topAdjust = ClonedImage.position().top - parentPostion.offset().top;
ClonedImage.css({left: leftAdjust, top: topAdjust});

Above functionality works in Jsfiddle..!

Upvotes: 1

Shivani P
Shivani P

Reputation: 416

Please try this :

I have changed CSS .Added z-index in draggable/droppable div : 

#droppable {
      border: 1px solid black;
      height: 250px;
      margin-left: 30%;
      margin-top: -35%;
      overflow: hidden;
      position: relative;
      width: 490px;
      background: #EBECED;
      z-index:1;
  }

I have changes img.drag to span.drag because class is assign to span.

span.drag {
      width: 40px;
      height: 40px;
      position: relative;
      z-index:2;
  }

Upvotes: 1

Related Questions