Redimensionnable, déplaçable objet jquery. Possible?

Je veux avoir un objet qui est à la fois redimensionnable et déplaçable. Je vais avoir besoin:

  • X
  • Y
  • Taille

de l'objet.

Est-ce possible?

Il y a un exemple sur http://www.jsfiddle.net/davidThomas/DGbT3/1/ qui obtient le x et y de l'objet déplaçable. Comment puis-je également faire redimensionnable?

Grâce

Il est utile d'ajouter que cette question est liée à, et construit sur cette question précédente: Comment obtenir la position d'un objet déplaçable?

Ne pas vous dire déplaçable, depuis les faisant glisser et redimensionner les besoins le même mouvement de la souris et des événements (cliquer-glisser), mais un drop élément reste là, à attendre que quelque chose traîné au sommet, et vous pouvez la redimensionner à tout moment, je pense.
merci inti, il doit être déplaçable comme vous l'avez mentionné.
Bien sûr, c'est possible!
De soins pour les aider au lieu de dire c'est possible?
Sérieusement? La question est, en effet, " est-il possible?" Mais pourrait-on supposer que l'OP moyen "comment cela peut-il être mis en œuvre?" à la place?

OriginalL'auteur Pabuc | 2011-02-04

  1. 8

    Sûr que c'est... jQuery UI est bon pour des comportements complexes comme le glisser-déposer, le redimensionnement, la sélection et le tri.

    Avec jQuery UI, vous pouvez:

    • Glisser
    • Baisse
    • Redimensionner
    • Sorte

    Et vous pouvez tout à la chaîne.

    Il est important pour la fonction de redimensionnement que vous incluez la jquery-ui.css fichier.

    JSFIDDLE: http://jsfiddle.net/uQWRk/

    Voici le code complet pour les archives:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#dragThis').resizable({
stop: function(event, ui) {
var w = $(this).width();
var h = $(this).height();
console.log('StopEvent fired')
console.log('Width:'+w);
console.log('Height:'+h)    
}
}).draggable(
{
containment: $('body'),
drag: function(){
var offset = $(this).offset();
var xPos = offset.left;
var yPos = offset.top;
$('#posX').text('x: ' + xPos);
$('#posY').text('y: ' + yPos);
},
stop: function(){
var finalOffset = $(this).offset();
var finalxPos = finalOffset.left;
var finalyPos = finalOffset.top;
$('#finalX').text('Final X: ' + finalxPos);
$('#finalY').text('Final X: ' + finalyPos);
}
});
$('#dropHere').droppable(
{
accept: '#dragThis',
over : function(){
$(this).animate({'border-width' : '5px',
'border-color' : '#0f0'
}, 500);
$('#dragThis').draggable('option','containment',$(this));
}
});
});
</script>   
<style type="text/css">
#dragThis {
width: 6em;
height: 6em;
padding: 0.5em;
border: 3px solid #ccc;
border-radius: 0 1em 1em 1em;
background-color: #fff;
background-color: rgba(255,255,255,0.5);
}
#dropHere {
width: 12em;
height: 12em;
padding: 0.5em;
border: 3px solid #f90;
border-radius: 1em;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="dragThis">
<ul>
<li id="posX"></li>
<li id="posY"></li>
<li id="finalX"></li>
<li id="finalY"></li>
</ul>
</div>
<div id="dropHere"></div>
</body>
</html>

    Voir les commentaires:
    Redimensionnable, déplaçable objet jquery. Possible?

    Pouvez-vous me dire comment la faire l'objet déplaçable sur jsfiddle.net/davidThomas/DGbT3/1 aussi changer de taille et d'obtenir la taille de celui-ci?
    Oui, je peux. Donnez-moi une seconde pour comprendre.
    Voir ma mise à jour en fonction de votre code ci-dessus.
    C'est assez cool. Euh, je n'ai pas regardé de près au pourquoi, mais sur le draggable's resize événement le droppable saute un peu. À l'aide de appendTo() ou quelque chose de similaire?
    c'est le genre de mises en œuvre dans la plus récente édition sur ma réponse à l'autre question. JS Fiddle lien. Je ne pouvais tout simplement pas, pour la vie de moi, de penser à la façon d'intégrer resizable. À mon éternelle honte... XD

    OriginalL'auteur gearsdigital

  2. 0

    Si tu veux bien, que quelque chose comme cela:

    $( "#elem" ).resizable().draggable();

    De la taille et de la position, vous pouvez pointer avec css (la première fois).
    Que vous pouvez les modifier et de les obtenir (lorsque vous redimensionnez ou déplacez) avec jQuery.

    Vous pouvez ajouter des options à draggable() et redimensionnable() méthodes. Référence est ici:
    http://jqueryui.com/demos/resizable/ et http://jqueryui.com/demos/draggable/

    P. S. Ce code nécessite jquery-ui.js fichier et jquery ui.css (car il tire un marqueur pour redimensionner)

    P. P. S.

    Avec votre lien:
    En JavaScript image, j'ai ajouté la ligne:

    $('#dropHere').resizable();

    Et j'ai ajouté css-style dans la gestion des ressources "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/base/jquery-ui.css"

    Et cela a fonctionné!

    Ne fonctionne pas, lorsque je ajouter .redimensionnable() de l'exemple jsfiddle.net/davidThomas/DGbT3/1
    redimensionnable ne fonctionne pas sans class="ui-widget-d'en-tête" et attachés de style css (de toute jquery thème).
    Je n'ai pas essayé avec votre lien, mais dans mon exemple local, si je supprimer <link type="text/css" href="css/flick/jquery-ui-1.8.9.la coutume.css" > ligne, que redimensionnable ne fonctionne pas.
    J'ai ajouté class="ui-widget-d'en-tête" mais cela ne fonctionne toujours pas. Que dois-je faire? Pouvez vous s'il vous plaît de référence pour le lien que j'ai donné.
    Je vais regarder. Mais avez-vous jquery-ui (et pas seulement jquery) css fichier joint?

    OriginalL'auteur Larry Cinnabar