Tag Archives: drag and drop

Craft.js – A React framework for building drag-n-drop page editors.

Page editors are a great way to provide an excellent user experience. However, to build one is often a pretty dreadful task.

Craft.js solves this problem by modularising the building blocks of a page editor. It provides a drag-n-drop system and handles the way user components should be rendered, updated and moved – among other things. With this, you’ll be able to focus on building the page editor according to your own specifications and needs.

Craft.js →

💡 If you’re looking for an editor that’s more focused on content (instead of the entire page layout), check out editor.js

Editor.js – Next generation block styled editor

Editor.js is a so called “block style editor” like the one Medium (and recently WordPress) sport.

The Editor.js workspace consists of separate Blocks: paragraphs, headings, images, lists, quotes, etc. Each of them is an independent contenteditable element (or more complex structure) provided by Plugin and united by Editor’s Core.

The output is not HTML but a JSON object which describes each Block.

Editor.js – Next generation block styled editor →

The resulting JSON reminds me of Jasonette, a tool to describe Mobile Apps using JSON.

react-dropzone

Simple HTML5 drag-drop zone to drop files on.

import React from 'react';
import Dropzone from 'react-dropzone';

export default class DropzoneDemo extends React.Component {

  onDrop(acceptedFiles, rejectedFiles) {
    console.log("Accepted files: ", acceptedFiles);
    console.log("Rejected files: ", rejectedFiles);
  }

  render() {
    return (
        <Dropzone accept="image/*" multiple={true} onDrop={this.onDrop}>
          <div>This dropzone accepts only images. Try dropping some here, or click to select files to upload.</div>
        </Dropzone>
    );
  }

}

In the onDrop you can then process the files for uploading.

react-dropzone →
react-dropzone Source (GitHub) →

Google Maps v3 Drag Polygon

It’s really not that hard. No need for one of the many diy scripts; just set the draggable property on your instance of google.maps.Polygon and you’re good to go.

Note: draggable was introduced in Google Maps v3.11 (dd 22 January 2013). The current stable version of Google Maps still is 3.10 however. For now (until 3.11 is the stable one), you can include the experimental 3.11 version by referencing http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false

Here’s an example showing the Bermuda triangle

var map = new google.maps.Map(document.getElementById('map_canvas'), {
	zoom: 5,
	center: new google.maps.LatLng(24.886436490787712, -70.2685546875),
	mapTypeId: google.maps.MapTypeId.TERRAIN
});

var poly = new google.maps.Polygon({
	paths : [new google.maps.LatLng(25.774252, -80.190262), new google.maps.LatLng(18.466465, -66.118292), new google.maps.LatLng(32.321384, -64.75737), new google.maps.LatLng(25.774252, -80.190262)],
	strokeColor: '#ff0000',
	strokeOpacity: 1,
	strokeWeight: 1,
	fillColor: '#ff0000',
	fillOpacity: 0.4,
	draggable: true, // yes, it's that easy!
	geodesic: true // set to false if you do not want distortion due to the mercator projection
});

poly.setMap(map);

Google Maps v3 Draggable Polygon

Google Maps v3 Draggable Polygon Demo →

Update: you might also be interested in Google Maps v3 Move Polygon, a code snippet of mine which allows one to programmatically move a polygon.

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)