Note / Tab上的jQuery可排序问题

Question

我正在研究jQuery sortable。哪个适用于桌面，但无论我从桌面获得什么结果，预计在三星Galaxy Note 800设备上也是如此。

我有蓝色列表。 在它上面显示绿色。 [拖动/排序时应该是绿色]。 掉线/鼠标移开后显示棕色。

哪个在桌面上工作得很完美，但在上面说的设备中，draggable / sortabble div的位置是div，它仍然显示绿色，应该是蓝色。

如何从设备中删除绿色？

CSS：

#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; border:1px solid red;}
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; background-color:blue; border:1px solid green; color:white;}
#sortable li span { position: absolute; margin-left: -1.3em;  border:1px solid pink;}
#sortable li:hover{
    background-color:green;
}
.ui-state-default.ui-sortable-helper{
    background-color:yellow;
}
.ui-sortable-placeholder{
background-color:yellow;
}
.dragging{
    background-color:pink;
}
.dropped{
    background-color: brown !important;
}
.dropped:hover{
    background-color: green !important;
}

HTML：

<ul id="sortable">
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s">1</span>Item 1</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s">2</span>Item 2</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s">3</span>Item 3</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s">4</span>Item 4</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s">5</span>Item 5</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s">6</span>Item 6</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s">7</span>Item 7</li>
</ul>

jQuery的：

$(function() {
$( "#sortable" ).sortable({
start: function (event, ui) {
ui.item.addClass("dragging");
},
stop: function (event, ui) {
setTimeout(function(){
ui.item.addClass("dropped");
$(document).focus();
},500);

//EnableDisableContentPlayerButtons(false, false, false);
}
});
//$( "#sortable" ).disableSelection();
});

`

Answer 1

这可能是由于鼠标事件在平板电脑上无法完全识别。

你可以使用Touch Punch http://touchpunch.furf.com/

您只需要包含它，它将通过触摸事件扩展Jquery UI。

<script src="jquery.ui.touch-punch.min.js"></script>

希望这有帮助！