javascript trascina e rilascia generatore di pagine

Question

Sono in procinto di creare un trascinamento della dimensione di una pagina in formato A4. Gli elementi che questo builder può contenere sono immagini e caselle di testo.

Sono qui per alcuni consigli su quali strutture sono disponibili che possono essere utilizzate per creare questo tipo di funzionalità front-end.

Esempio di quello che sto cercando, vedi qui canva.com

I due quadri che ho provato sono finora sono fabric js e greensock draggable, che non ha soddisfatto le mie esigenze o sono piuttosto difficili da creare un costruttore pagina completa.

idealmente non voglio usare la tela per questo.

edit: Caratteristica di base:

• ritaglio
• rotazione
• ridimensionamento
• cambiare il font di stile/colore/formato per le caselle di testo
• aggiungere sfondi
• fotogrammi/mascheramento immagini (l'immagine quadrata può diventare una stella con una sovrapposizione)

Answer 1

V'è un plugin jQuery utile per la rotazione .. tuo codice:

<div id="product"> 

<img src="images/01.jpg" /> 

<img src="images/02.jpg" /> 

<img src="images/03.jpg" /> 

<img src="images/04.jpg" /> 

<img src="images/05.jpg" /> 

</div> 
<script type="text/javascript"> 

jQuery(document).ready(function() { 

    jQuery('#product').j360(); 

}); 

</script> 

Questo dovrebbe funzionare.

Answer 2

Beh, la maggior parte dei vostri obiettivi può essere raggiunto da css 2/3 + alcuni js puri

ritaglio/mascheratura

http://www.html5rocks.com/en/tutorials/masking/adobe/

ridimensionamento, cambiare font stile/colore/dimensione per caselle di testo, aggiungi sfondi

js puri/CSS2

rotazione

CSS3 trasformare proprietà http://www.w3schools.com/cssref/css3_pr_transform.asp

trascinando

può essere abbastanza facilmente effettuata, utilizzando js puri o si può provare alcuni plugin open source, o qualcosa come jquery draggable.

Per quanto riguarda il tuo elenco corrente, in realtà non vedo, perché vuoi un framework per questo, quando la maggior parte di esso può essere raggiunta da pure js/css con un piccolo sforzo/googling.

Nella mia umile opinione, jquery o qualcosa di simile è tutto ciò di cui hai veramente bisogno. Basta controllare la sezione "interazioni" di jquery qui https://jqueryui.com/draggable/ per vedere se può aiutarti a costruire la tua interfaccia builder. Ci sono vari esempi per ogni interazione (barra laterale destra).

UPD: Ecco alcuni esempi di codice di errore (utilizzando l'interfaccia utente di jquery) http://jsfiddle.net/tbpxnxrm/2/. Fai doppio clic su #main per creare elementi aggiuntivi. Nessun collisione/controlli sovrapposti attuate, biforcute da http://jsfiddle.net/4Vfm5/1095/

drag_defaults = {grid: [50,50], containment: "parent"}; 
resize_defaults = { 
    aspectRatio: true, 
    handles: 'ne, se, sw, nw', 
    grid: [50,50], 
    minHeight: 50, 
    minWidth: 50 
} 

$('.draggable').draggable(drag_defaults); 
$('.resizable').resizable(resize_defaults); 

UPD2: Dopo un paio di anni il mio esempio ha smesso di funzionare affatto su jsfiddle. Non posso sicuramente dire perché, ma la risposta principale è ancora credibile.

Answer 3

Da quanto ho capito, si desidera creare un dashboard che può essere configurato. Vorrei suggerire l'uso di una struttura di tabella Table merge and split in cui ogni cella deve avere una componente dropable come

<table id="mainTable"> 
        <tbody> 
         <tr> 
          <td class="set-as-droppable"></td> 
          <td class="set-as-droppable"></td> 
          <td class="set-as-droppable"></td> 
          <td class="set-as-droppable"></td> 
         </tr> 
         <tr> 
          <td class="set-as-droppable"></td> 
          <td class="set-as-droppable"></td> 
          <td class="set-as-droppable"></td> 
          <td class="set-as-droppable"></td> 
         </tr> 
        </tbody> 
       </table> 

Come

Poi su goccia scrivere il proprio logica

$(".set-as-droppable").droppable({ 
     accept: "div.Dragable", 
     drop: function(event, ui) { 

} 
}); 

E componente dragable può essere TESTO o IMMAGINE e in caduta puoi dare qualsiasi operazione

Answer 4

Penso che non puoi farlo con un solo framework se il tuo obiettivo è renderlo il più semplice possibile.

Se ho capito bene, quello che vuoi fare è consentire all'utente della tua app di realizzare una sorta di "disegno" avanzato realizzato direttamente nel browser.

Primo: senza elemento canvas, i loro lavori dovranno essere esportati/generati lato server.

Ora, il modo migliore per farlo sarebbe avere un oggetto javascript che rappresenta ogni documento e il loro contenuto, con i modelli inclusi e ciascuna proprietà come posizione, rotazione descritta. E questo oggetto dovrebbe essere reso rendendo le proprietà CSS e gli elementi HTML corrispondenti alla struttura dell'oggetto. Vale a dire AngularJS sarebbe la mia prima scelta in quanto guarda quasi automaticamente i tuoi modelli e rende l'elemento di destinazione in tempo reale non appena il tuo oggetto viene modificato. (Angolare 2 è meglio, ma documentata solo a macchina e Dart)

Da qui, con HTML5 & css3, gli elementi possono essere manipolati con una bella proprietà: trasformare. Prende valori come "translateX (10px)" o "rotateZ (10deg)". Per ulteriori informazioni a riguardo: http://www.w3schools.com/cssref/css3_pr_transform.asp.

Inoltre, per il trascinamento della selezione: http://www.w3schools.com/html/html5_draganddrop.asp.

Per ritagliare un'immagine, è necessario utilizzare il codice lato server. (Esempio con php: http://php.net/manual/fr/function.imagecrop.php)

per giocare con le maschere sulle immagini, ci sono anche proprietà CSS3 che funzionano bene: http://www.w3schools.com/cssref/pr_pos_clip.asp

E per la comunicazione tra la vostra applicazione e il server, utilizzare le funzioni di jQuery: http://api.jquery.com/category/ajax/.

Infine, scegli quello che desideri da css3: http://www.w3schools.com/css/css3_intro.asp. http://www.w3schools.com/css/css3_images.asp

Spero che ti possa aiutare. In bocca al lupo !

UPDATE: Ho trovato che la proprietà css della clip è obsoleta, ora è clip-path ma funziona in modo approssimativo allo stesso modo.

UPDATE 2: In realtà, maschere (con immagini e non percorsi) possono essere effettuate tramite proprietà mask css: https://developer.mozilla.org/en-US/docs/Web/CSS/mask. Ma attenzione, è ancora parzialmente supportato http://caniuse.com/#search=mask.

Answer 5

Ho provato a implementarlo nel mio tempo libero ma non è qualcosa che può essere fatto da zero usando puro js in un paio di ore dopo. Finora ho un prototipo di plugin jQuery per far cadere nuovi elementi dom in un'area di pagina. Ho anche provato a rendere ridimensionabile qualsiasi componente di blocco in una pagina. Nelle poche ore in cui l'ho messo ho avuto un certo successo.

componente blocco ridimensionabile: (Edit: trascinare i 4 piccoli manici in mezzo dei lati)

Fiddle

Page Builder prototipo con menu e zona droppable (solo la voce di testo può essere eliminato):

Fiddle

sarò mantenere l'aggiornamento dei violini ogni volta che mi capita di lavorare su di esso, ma non avrò un plugin in qualsiasi momento finita presto.

Too much code to put here! Visit the fiddle