4

I am not able to solve the following problem:

The below code works in all browsers of mac as well as windows, except that it works partially on macs safari(5.1.5).

Note: It works on windows safari(5.1.5).

This is the basic structure:

enter image description here

$(".div2" ).droppable({
        accept: '.div1',
        tolerance: 'touch',
        drop: function(){ 
                        alert('dropped');
        }   
});

So, basically when div1 touches div2 , drop event should be triggered.

enter image description here

But the above case does not trigger the drop event.

The only case (shown below) that triggers the drop event in macs safari is when the draggable div div1 completely passes the droppable div div2. i just dont know why??

enter image description here

Versions used:

jQuery: 1.7.2
jQuery UI: 1.8.18
Safari(mac): 5.1.5

update:

I tried other options of tolerance. Both 'touch' and 'intersect' do not work as desired. But 'pointer' works perfectly fine.

Is there any other way i could achieve the functionality of 'tolerance:touch'? I am thinking of detecting collision between 2 divs and then apply the corresponding logic.

Any help will be appreciated.

Thanks!

Priyank Kapasi
  • 1,773
  • 2
  • 18
  • 27
  • 1
    A brief explanation in question is required, but faulty code that shows the live version of issue is really helpful - and it will make people understand you better - in the future try giving us the link to jsfiddle.net with your problem as example. – biphobe Apr 27 '12 at 06:32
  • I had the same problem with 'touch', so I made a work around too. There is a JQuery extension by Brandon Aaron (http://brandonaaron.net) to detect collisions between DOM Elements (strictly speaking one element and a JQuery set). I now use a number of copies of this script on a website I am currently developing; the original script, one that detects whether whether the first element is wholly contained by a member of the set, and finally a copy that checks whether element A is within x number of pixels of a member of the set. Try playing with the plugin - any questions? Please ask :) – Joe Bowman May 24 '12 at 06:55
  • i had to also then develop a collision algorithm of my own to satisfy the above condition. – Priyank Kapasi May 25 '12 at 18:10

1 Answers1

0

Try add position: absolute !important; to the element. That's the solution I found to this problem. Otherwise you can try create a parent div for the draggable / droppable div.

Widor
  • 13,003
  • 7
  • 42
  • 64
JohannesAndersson
  • 4,550
  • 2
  • 17
  • 30