CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-ui
Azad Young
Azad Young

Reputation: 53

Enable jQuery UI drag and drop on Surface Pro tablet

As the title says, I'm trying to enable drag and drop on the Sufrace Pro 3 tablet.

Is drag and drop functionality even supported on these devices? If so, how would I go about enabling this feature? If not, how can I workaround this?

I'm trying to get jQuery UI's drag and drop feature to work. Here is a basic example I am trying to get working:

$( "#draggable" ).draggable();
#draggable {
    width: 200px;
    height: 200px;
    border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div id="draggable">
  <p>Drag me around</p>
</div>

Upvotes: 5

Views: 2793

Answers (3)

mozgras
mozgras

Reputation: 3325

There is an updated version that works for Windows 10. https://github.com/RWAP/jquery-ui-touch-punch/blob/master/jquery.ui.touch-punch.js

Upvotes: 4

Josh Crozier
Josh Crozier

Reputation: 240928

I had a similar issue a while back. You need to change the touch-action property of the desired elements to none. In this case, since you're using jQueryUI, you would apply this to the .ui-draggable/.ui-droppable elements.

You will also need to add the -ms vendor prefix, therefore you would use -ms-touch-action: none:

.ui-draggable, .ui-droppable {
    -ms-touch-action: none;
    touch-action: none;
}

Upvotes: 9

Crash Override
Crash Override

Reputation: 461

Try using Touch Punch which enables the use of jQuery UI on touch devices.

You only need to insert it right after jQuery ui like:

<script src="path/to/file/jquery.js"></script>
<script src="path/to/file/jquery-ui.js"></script>
<script src="path/to/file/jquery-touch-punch.js"></script>

No code needed

Upvotes: 2

Related Questions