перетащить, предотвратить неловкое выделение? - PullRequest
7 голосов
/ 09 марта 2012

Я строю метод перетаскивания, используя запрос -onmousedown приводит к -onmousemove (перетаскивает) затем -onmouseup (развязывает на mmousemove)

проблема в том, что настройки браузера по умолчанию начинают выделять onmousemove, который летит по всей странице и отменяет событие, делая его непригодным для использования. Любая идея, как предотвратить выделение, так как предотвращение дефолта не работает. вот мой код (да, он очень неряшливый, извините!)

$(".middleRow").mousedown(function(){
 calculateSelection();

  $('body').append('<div class="messageDrag" style="display:block">'+numSelected+'<div        style="font-size: 18px">messages</div></div>');


 $(document).mouseup(function(){

        $('.messageDrag').fadeOut(500);

        setTimeout(function(){
        $('.messageDrag').remove();
        }, 500);


        $(document).unbind();


    })


$(document).mousemove(function(e){


    e.preventDefault();


    var x = e.pageX;
    var y = e.pageY;
    $(".messageDrag").css("left", x-49);
    $(".messageDrag").css("top", y-49);


});

 });

Ответы [ 2 ]

12 голосов
/ 09 марта 2012

Вы можете отключить выделение, используя css

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;

еще один способ сделать это - очистить выделение при событии сброса, например:

function clearSelection() {
    var sel;
    if(document.selection && document.selection.empty){
        document.selection.empty() ;
    } else if(window.getSelection) {
        sel = window.getSelection();
        if(sel && sel.removeAllRanges)
        sel.collapse();
    }
}

Таким образом, вы бы назвали clearSelection() при событии отбрасывания (после завершения перетаскивания)

2 голосов
/ 09 марта 2012

добавить css

-webkit-touch-callout: none;/*for mobile*/
-webkit-user-select: none;/*for chrome*/
-khtml-user-select: none;/*for safari*/
-moz-user-select: none;/*for Mozilla*/
-ms-user-select: none;/*for mircosoft*/
-o-user-select: none;/*for opera*/
user-select: none;/*base css ,but not work in all browsers*/
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...