background preloader

Drag n drop

Facebook Twitter

Exerciseur générateur de mots images. Dans la page résultat, il y aura un tas d'images empilées que les enfants auront à répartir, à classer ou dénombrer ou associer ou trier.

exerciseur générateur de mots images

Les critères de tri ou de classement sont à définir par vous. Si vous choisissez l'option fond personnel à la place de fond blanc, vous pourrez insérer votre fond de page. L'exercice peut se faire à la souris ou grâce au stylet du tbi. La page résultat est enregistrable et peut fonctionner en local sur votre ordinateur (enregistrer page web complète avec java script) Consultez la page astuces pour avoir d'autres informations utiles ( groupes de mots, couleur, enregistrement) Vous pouvez aussi choisir une police image dans la liste déroulante centrale . jQuery HTML5 Drag-and-Drop File Upload. EmailShareEmailShare Like the article?

jQuery HTML5 Drag-and-Drop File Upload

Often we have a situation on our site where we want users to be able to upload a file. Whether this is for a profile, pictures of any item or other scenario, creating a file upload doesn’t have to be tricky. With some of the nice tricks in HTML5 and jQuery we can even add the nice touch of being able to drag and drop files directly into the uploader, making your site feel extra-special. In this tutorial we will discuss the techniques of both of these techniques that make this trick possible as well as create a drag and drop image uploader of our own. HTML5 File Upload Process There are some new, built-in features of HTML5 that make uploading files really easy.

An AJAX component will be necessary to send the files in memory to the server. The jQuery Components jQuery has an excellent add-in called FileDrop that allows users to drag and drop multiple files onto the browser window from their computer. Downsides to This Process Creating the Upload Page. Drag ‘n’ Drop Shopping Cart With jQuery UI (Tutorial) Drag ‘n’ dropping items has its various popular uses and shopping carts are definitely one of them.

Drag ‘n’ Drop Shopping Cart With jQuery UI (Tutorial)

In this tutorial, we’ll be creating a simple shopping cart that works with drag ‘n’ drops. It will have support for add-to-basket with quantity updates (so that the same items could be added more than once) and removing items from the basket. It will be totally client-side and cover the basic functionality (no PayPal integration, etc.). For that, we’ll be using, probably the best drag-drop library, jQuery UI Draggable/Droppable in this tutorial. Here is the end result: Let’s get started: Step 1 -> Get the custom jQuery UI package jQuery UI has lots of features and every feature adds bytes to its source, it is much more smarter to get only what we need.

As you can see from the screenshot above, we need the Core, Widget, Mouse from the core and Draggable + Droppable from the interactions. This will end up in a 37kb JavaScript file which is not so bad for the features and compatibility offered. Drag And Drop Scripts. Drag and drop - Arrange table rows This scripts enables you to rearrange rows in a HTML table by using drag and drop.

Drag And Drop Scripts

One example of use is to rearrange articles in a Content Management System(CMS) Info and download | Demo iGoogle-like Drag & Drop Portal v2.0 Submitted/External script This is a great script created by Michel Hiemstra. Script homepage | Our local demo | Michel's demo DG Image Crop A new and improved image crop script.

Info and download | Demo Custom drag and drop script FF,IE5.5,Op8 Last updated: September, 22nd 06, New features: Limit dragging(directions or by parent id). This is not like any of the other drag and drop scripts you'll find below. Info and download | Demo 1 | Demo 2 | Demo 3. Drag & Drop.