2013-12-05 4 views
1

Я работаю над сортировкой jQuery. Что отлично работает с Desktop, но любой результат, который я получаю с рабочего стола, ожидал того же самого на устройстве Samsung Galaxy Note 800.jQuery Sortable issue on Note/Tab

У меня есть список Синего цвета. На над ним показывает зеленый. [При перетаскивании/сортировке он должен быть зеленым). После отбрасывания/выведения на экран он показывает коричневый цвет.

Которая работает идеально на рабочем столе, но в вышеуказанном устройстве перетаскиваемое/sortabble место div, занимающее div, которое по-прежнему показывает зеленый цвет, который должен быть синим. enter image description here

Как удалить этот зеленый цвет с устройства?

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

`

ответ

0

Его, вероятно, из-за событий мыши не полностью отражаются на планшете.

вы можете использовать сенсорный Панч http://touchpunch.furf.com/

все, что вам нужно сделать, это включить его, и он будет распространяться Jquery UI с сенсорными событиями.

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

надеюсь, что это поможет!