Search code examples
cssjquery-ui-touch-punch

CSS Issue: Sortable Using Touch Punch not working in Mobile (Safari)

I created a drag and drop or sortable image using touch punch.. Everything works fine in chrome even in android. But it seems it is not working in Safari using iPhone..

https://jsfiddle.net/y05w1mog/

Might be an CSS issue.. Image should be draggable to one of the four options below.

 td {
  width: 200px;
 vertical-align: top;
}

.box {
    border: 2px inset #aaaaaa;
     height: 240px;
overflow-x: hidden;
  text-align: center;
 padding: 10px;
 overflow-y: auto;
}

.box img {
    position: relative !important;
}

 #div-images img {
height: 120px;
position: absolute;
top: 5px;
left: 0;
}

  #div-images {
  height: 100px;
  width: 150px;
  position: relative;
  margin: 0 auto;
  border: 3px double black;
  padding: 5px;
  }

  th {
  background-color: #538DD5;
  color: white;
  }
Solution

  • It turns out

    containment: 'window',

    from the touch punch is the one, not working in safari..