Enable jQuery UI drag and drop on Surface Pro tablet

Question

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>

Answer 1

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;
}