Ça fonctionne parfaitement dans Firefox, mais dans IE, Chrome et Opera, il ne fonctionne pas.
<div> has position:fixed, and is .draggable()
3 Réponses :
Ne pas définir correctement dans CSS: il fonctionne dans Firefox, Chrome, Safari, Iexplore
var div = $('#id');
div.resizable(
{
stop: function(event, ui)
{
var top = getTop(ui.helper);
ui.helper.css('position', 'fixed');
ui.helper.css('top', top+"px");
}
});
div.draggable(
{
stop: function(event, ui)
{
var top = getTop(ui.helper);
ui.helper.css('position', 'fixed');
ui.helper.css('top', top+"px");
}
});
function getTop(ele)
{
var eTop = ele.offset().top;
var wTop = $(window).scrollTop();
var top = eTop - wTop;
return top;
}
Agréable ! Vous pouvez également utiliser la position: fixe; Pour initialiser avec une position relative et corrige le premier saut de drag jsfiddle.net/dx8n3/24
N'oubliez pas d'ajouter jquery.ui (sinon, vous obtiendrez une erreur TypeError: $ (...). Refenseable n'est pas une fonction;)
Il suffit d'utiliser dans votre CSS:
function stop(event){
if(event.type === "resizestop"){
var topOff = $(this).offset().top - $(window).scrollTop()
$(this).css("top",topOff)
}
$(this).css("position","fixed")
}
Si vous mettez un point de pause sur le ... Draggable (...); Vous verrez qu'il est ajouté position: fixée à l'élément.style.
juste annuler cela avec .style.position = "";
Mon code efface le style afin qu'il soit revenu sur la déclaration CSS. Avec une version plus ancienne de l'interface utilisateur JQuery, vous devrez peut-être faire le gestionnaire de drags d'arrêt. que je doute. mais certainement pas vrai pour le dernier.
Sûrement, vous ne pouvez pas vouloir que ce soit druggable et rester dans la même position? Vous allez déchirer votre écran.
Je peux. Je veux que ce soit "réparé" dans View Port, mais je suis également capable de le déplacer un peu à droite ou à gauche (draggible), et si je le laisse tomber, il devrait être "fixe" dans la nouvelle position.
Je reçois un comportement identique à Chrome et FF: ici
Le code de SJE397 fonctionne aussi pour moi dans IE8 et Opera 10.6 mais l'élément colle au fond à cause du CSS. Si vous spécifiez un haut et laissé, tout fonctionne normal.