1

I was trying to drag and drop image into its blank mold on a webpage. Therefore, I am trying with a box first. However, as I drag the image into the box the image doesn't result in the box but outside it.Any ideas what's going wrong?

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("image");
    var new_img = $('#'+data).clone();
    $('#'+ev.target.id).html(new_img);
    ev.target.appendChild(document.getElementById(data));
}
Bhimesh Chauhan
  • 80
  • 1
  • 11

1 Answers1

0

This is likely to be a CSS issue rather than JS. Make sure you don't have float property set on your image (you can add img {float: none !important;} to your CSS and see if it resolves).

If that proves to be the issue, have a look at how to apply a clearfix: What methods of ‘clearfix’ can I use?

Community
  • 1
  • 1
Hugo Silva
  • 6,748
  • 3
  • 25
  • 42
  • That's really helpful, however this screws up my image position as it over-rides the image position that I am dragging. Would defining the image position in HTML help? – Bhimesh Chauhan Jul 05 '16 at 17:26
  • this is not the solution. this was just a test to check if floating is the problem. A good fix would be applying a clearfix, which is the link referenced in the answer. Optionally, you can use `float: left` on the container. – Hugo Silva Jul 05 '16 at 20:52
  • I am sorry, I think I wasn't as clear. So, lets say I have an image needed to be dropped in a box. Now earlier( the image which is positioned at lower corner of the screen and box in center) when dropped, the image won't stay inside the box. However, using the float option makes it stay. Now, the problem is that the image does not hold it's position and assumes a default one from somewhere.. – Bhimesh Chauhan Jul 06 '16 at 00:21
  • And I meant that adding `img {float: none !important;}` is not the solution. Instead, choose one of the three options: 1- apply a clearfix to the container of the image; 2- use `float: left` on the container; 3- apply `float: none` only to the image in question – Hugo Silva Jul 06 '16 at 00:26
  • Now, maybe you need some help with your css. In that case, I think you should open a new question... – Hugo Silva Jul 06 '16 at 00:27