jQuery de tir à l'événement glisser tandis que la souris est toujours à la baisse
Ok j'ai été jouer avec pendant des heures maintenant et toujours pas de dés. Je suis en création d'une interface vous permettant de faire glisser et de déposer une icône(un div avec une image à l'intérieur). Je suis à l'aide de la les scripts jQuery UI pour ils sont essayé et testé div glisser fonctionnalité.
Mon problème est que vous ne pouvez pas faire glisser un div dehors c'est la div parent. Pour contourner ce problème, je suis en création d'un dragable div, ajouté dans le corps du document, à la demande lorsqu'un utilisateur déclenche un événement mousedown. Mais je ne peux pas comprendre comment se déclenche l'événement glisser nécessaires afin que l'utilisateur peut immédiatement commencer à faire glisser ce nouveau div autour.
En bref j'ai besoin d'; souris -> appel de la fonction à créer déplaçable div> faites glisser la div autour tandis que la souris est toujours en baisse.
Je suis sûr que c'est quelque chose de simple. Toute aide serait grandement appréciée.
Voici un exemple de mon problème, tout ce qu'il faut pour exécuter sont les scripts jQuery UI qui peut être trouvé sur le lien ci-dessus.
<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>Lorsque vous cliquez sur le div que je veux être en mesure de créer un nouveau div et faites-le glisser autour instantanément.
- Nous montrer le code que vous utilisez pour créer de la div.
- Ont ajouté les exemples de code, à l'intérieur de la createDraggableDiv fonction le code crée la div.
Vous devez vous connecter pour publier un commentaire.
Montage Final. Voici les fonctionnalités que vous souhaitez. J'ai dû modifier votre code beaucoup, mais ce n'est ce que vous voulez qu'il fasse. Vous avez besoin de passer l'événement mousedown vous êtes de cuisson dans un déclencheur de la div. Voici le nouveau jsfiddle
Ce doit être votre html
Ici est l'option javascript de votre
Et votre CSS
Les réponses ci-dessus sont mieux parce qu'ils sont en discutant de faire de la bonne façon. Cependant, littéralement répondre à votre question, vous pouvez déclencher l'événement mousedown en tant que tel...
ok. après la lecture de vos commentaires je pense que je comprends ce que vous essayez de faire, mais je ne pense pas qu'il y est un "commencer à glisser" la méthode que nous utilisons dans jquery.
mais comment à ce sujet, au lieu de lier un événement mousedown sur Un div qui crée le nouveau div B, puis en essayant de faire glisser div B, pourquoi ne pas supprimer l'événement mousedown complètement et de le remplacer par un déplaçable de l'événement, et de déclencher un peu de code au début de l'événement glisser.
par exemple:
la addClasses bits pouvez changer l'apparence de votre div, et le début de l'événement peut déclencher un peu de code pour modifier Un div (qui vous êtes maintenant en le faisant glisser) pour apparaître comme votre div B.
EDIT: le scroll:faux bits doit obtenir autour de les les problèmes que vous rencontrez avec le "overflow:auto" div parent.
c'est un peu d'un travail autour, mais devrait vous donner la fonctionnalité que vous êtes après (en supposant que je vous comprends bien cette fois!! 🙂
stop:function(){},événement..selectorest juste l'identifiant de ce que vous souhaitez faire glisser, im deviner un div, par exemple,<div class="selector">draggable</div>- ive édité ma solution et de mettre de défilement:false dans le bon endroit pour vous.Le concept de la création d'un clone qui est traîné, est déjà mis en œuvre dans le déplaçable plugin. Vous devriez avoir utilisé de la sorte:
La appendTo option représente l'élément sur lequel vous souhaitez l'aide à être créé
Vous pouvez masquer votre premier objet glissé sur dragstart (ou de l'y laisser, si vous le désirez)
Voici un jsFiddle que j'ai pris comme un échantillon: http://jsfiddle.net/HnpbX/6/
Si vous voulez obtenir une fonctionnalité de glisser-déposer un élément à partir d'un récipient à un autre, vous devez utiliser le droppable en combinaison avec déplaçable