jQuery Comment lancer l'événement drag alors que la souris est toujours en bas
Ok je joue avec ça depuis des heures maintenant et toujours pas de dés. Je crée une interface vous permettant de glisser-déposer une icône(une div avec une image à l'intérieur). J'utilise les scripts de L'interface utilisateur jQuery car ils sont testés et essayés avec la fonctionnalité div dragging.
mon problème est que vous ne pouvez pas faire glisser une div en dehors de c'est la div mère. Pour contourner cela je crée un div dragable, ajouté au corps du document, sur demande quand un utilisateur renvoie un événement de mousedown. Mais je n'arrive pas à trouver comment désactiver l'événement drag nécessaire pour que l'utilisateur puisse immédiatement commencer à faire glisser cette div nouvellement créée.
en bref j'ai besoin de; souris vers le bas -> fonction d'appel pour créer div glissant -> traîner le div autour tandis que la souris est encore en bas.
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 a besoin d'exécuter sont les jQuery Les scripts D'UI qui peuvent être trouvés 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>
quand vous cliquez sur le div je veux être en mesure de créer un nouveau div et faire glisser que autour instantanément.
4 réponses
montage Final. Voici la fonctionnalité que vous voulez. J'ai dû modifier ton code beaucoup, mais ça fait ce que tu veux qu'il fasse. Vous devez passer l'événement de mousedown que vous tirez dans une gâchette sur le div ajouté. Voici le nouveau jsfiddle
ceci devrait être votre 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>
Voici votre 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
});
et votre 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; }
les réponses ci-dessus sont meilleures parce qu'il est question de le 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...
$("div#divID").trigger("mousedown");
ok. après avoir lu vos commentaires, je pense que je comprends ce que vous essayez de faire, mais je ne pense pas qu'il existe une méthode "start drag" que nous pouvons utiliser dans jquery.
mais qu'en est-il de cela, au lieu de lier un événement mousedown sur div A qui crée la nouvelle div b et ensuite essayer de faire glisser div b, pourquoi ne pas supprimer tout à fait l'événement mousedown et le remplacer par un événement draggable, et lancer un peu de code au début de l'événement drag.
par exemple:
$(".selector").draggable({
appendTo:'body',
addClasses:'',
scroll:false,
start:function(){
//your code here
//eg:
$(this).html('something else');
}
});
le bit addClasses peut changer l'apparence de votre div, et l'événement start peut déclencher un code pour modifier la div a (que vous faites maintenant 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.
est un peu d'un travail autour, mais devrait vous donner la fonctionnalité que vous recherchez (en supposant que je comprenez-vous correctement cette fois!! :)
le concept de créer un clone qui doit être traîné est déjà implémenté dans le plugin draggable. Vous auriez dû l'utiliser ainsi:
$('#tester').draggable({helper: 'clone', appendTo: 'body'});
l'option appendTo représente l'élément où vous voulez que l'Assistant soit créé
vous pouvez cacher votre objet traîné initial sur dragstart (ou le laisser là si vous le désirez) Voici un jsFiddle que j'ai fait comme échantillon: http://jsfiddle.net/HnpbX/6 /
si vous souhaitez obtenir une fonctionnalité de glisser et de déposer un élément d'un conteneur à un autre, vous devez utiliser le droppable en combinaison avec le draggable