Как запустить событие перетаскивания, когда мышь еще не нажата - PullRequest
Новая
       1

Как запустить событие перетаскивания, когда мышь еще не нажата

3 голосов
/ 06 января 2012

Хорошо, я играю с этим уже несколько часов и до сих пор не играю в кости. Я создаю интерфейс, позволяющий вам перетаскивать значок (div с изображением внутри). Я использую jQuery UI-скрипты , потому что они опробованы и протестированы с функцией перетаскивания div.

Моя проблема в том, что вы не можете перетащить div за пределы родительского div. Чтобы обойти это, я создаю перетаскиваемый div, добавляемый к телу документа, по требованию, когда пользователь запускает событие mousedown. Но я не могу понять, как запустить событие перетаскивания, необходимое, чтобы пользователь мог немедленно начать перетаскивать этот недавно созданный div вокруг.

Короче мне нужно; мыши вниз -> вызвать функцию для создания перетаскиваемого div -> перетащить div вокруг, пока мышь еще не нажата.

Я уверен, что это что-то простое. Любая помощь будет высоко ценится.

Вот пример моей проблемы, все, что нужно для запуска - это скрипты пользовательского интерфейса jQuery, которые можно найти по ссылке выше. 

<html>
<head>
    <script src="../../jquery-1.6.2.js"></script>
    <script src="../../ui/jquery.ui.core.js"></script>
    <script src="../../ui/jquery.ui.widget.js"></script>
    <script src="../../ui/jquery.ui.mouse.js"></script>
    <script src="../../ui/jquery.ui.draggable.js"></script>
    <style>
    #inactive_dragable { width: 50px; height: 50px; padding: 0.5em; background-color: green; }
    .test_drag { width: 50px; height: 50px; padding: 0.5em; background-color: red; position: absolute; }
    </style>
    <script>

    function createDraggableDiv(e){     
        if (!e) var e = window.event;   
        jQuery('<div/>', {
            id: 'tester',
        }).appendTo('#page_wrap');      
        var isIE = document.all ? true : false;
        var _x,_y;
        if (!isIE) {
            _x = e.pageX;
            _y = e.pageY;
        }
        if (isIE) {
            _x = e.clientX + document.body.scrollLeft;
            _y = e.clientY + document.body.scrollTop;
        }
        var boundry = $('#page_wrap').offset();
        $('#tester').addClass('test_drag');
        $('#tester').html("New div to drag");
        $('#tester').css("top", _y + "px");
        $('#tester').css("left", _x + "px");
        $('#tester').draggable();       
        // Now how do I make the new div immediately start dragging?
        // ...
    }
    </script>
</head>
<body>
<div id="page_wrap">
<div class="demo" style="width: 300px; height: 200px; background-color: blue; overflow-y: auto; overflow-x: hidden;">
<div onmousedown="createDraggableDiv(event);" id="inactive_dragable" class="ui-widget-content">
    <p>Drag me around</p>
</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</div>
</div>
</body>
</html>

Когда вы нажимаете на div, я хочу иметь возможность создавать новый div и перетаскивать его вокруг.

Ответы [ 4 ]

3 голосов
/ 06 января 2012

Окончательное редактирование.Вот функциональность, которую вы хотите.Мне пришлось много модифицировать ваш код, но это делает то, что вы хотите.Вам нужно передать событие mousedown, которое вы запускаете, в триггер на добавленном div.Вот новый jsfiddle

Это должен быть ваш HTML 

<html>
<head>  
</head>
<body>
<div id="page_wrap">
<div class="demo" style="width: 300px; height: 200px; background-color: blue; overflow-y: auto; overflow-x: hidden;">
<div id="inactive_dragable" class="ui-widget-content">
    <p>Drag me around</p>
</div>
Lorem ipsum dolor sit amet...</div>
</div>
</body>
</html>

Вот ваш javascript 

$(".demo").mousedown(function (e){
    var isIE = document.all ? true : false;
        var _x,_y;
        if (!isIE) {
            _x = e.pageX;
            _y = e.pageY;
        }
        if (isIE) {
            _x = e.clientX + document.body.scrollLeft;
            _y = e.clientY + document.body.scrollTop;
        }
        var boundry = $('#page_wrap').offset();
        $('<div/>', {
            id: 'tester',
        }).addClass('test_drag')
        .html("New div to drag")
        .css("top", _y + "px")
        .css("left", _x + "px")
        .draggable()                 
        .appendTo('#page_wrap');
        $("#tester").trigger(e); //this is the important line, that triggers the drag
});

И ваш CSS 

#inactive_dragable { width: 50px; height: 50px; padding: 0.5em; background-color: green; }
.test_drag { width: 50px; height: 50px; padding: 0.5em; background-color: red; position: absolute; }
1 голос
/ 06 января 2012

Приведенные выше ответы лучше, потому что они обсуждают, как делать это правильно. Однако, чтобы буквально ответить на ваш вопрос, вы можете вызвать событие mousedown как таковое ... 

$("div#divID").trigger("mousedown");
1 голос
/ 06 января 2012

ки.после прочтения ваших комментариев, я думаю, что понимаю, что вы пытаетесь сделать, однако я не думаю, что есть метод «перетаскивания», который мы можем использовать в jquery.

, но как насчет этого, вместо привязки mousedownсобытие в div A, которое создает новый div B, а затем пытается перетащить div B, почему бы вообще не удалить событие mousedown, заменить его перетаскиваемым событием и запустить некоторый код в начале события drag.

например: 

$(".selector").draggable({
  appendTo:'body',
  addClasses:'',
  scroll:false,
  start:function(){
    //your code here
    //eg:
    $(this).html('something else');
  }
});

бит addClasses может изменить внешний вид вашего div, а событие start может запустить некоторый код, чтобы изменить div A (который вы сейчас перетаскиваете), чтобы он выглядел так, как вы планировалиdiv B.

EDIT: бит scroll: false должен обойти проблемы, которые возникают у вас с родительским div "overflow: auto".

немного обойти, но должендать вам функциональность, что вы после (при условии, что я понимаю вас правильно на этот раз !!:)

0 голосов
/ 25 июля 2013

Концепция создания клона, который нужно перетаскивать, уже реализована в плагине draggable.Вы должны были использовать его следующим образом: 

$('#tester').draggable({helper: 'clone', appendTo: 'body'});

Параметр appendTo представляет элемент, в котором вы хотите создать помощника

Вы можете скрыть свой первоначальный перетаскиваемый объект на dragstart (или оставить его).там, если хотите) Вот jsFiddle, который я сделал в качестве образца: http://jsfiddle.net/HnpbX/6/

Если вы хотите добиться функциональности перетаскивания элемента из одного контейнера в другой, вы должны использовать Droppable в комбинациис перетаскиваемым

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...