xOyPaa

index.jade

.builder
	#elements
		.element(data-element-name="logo")
			.element-icon
				i.fa.fa-adn
				.element-name Logo
			.element-controls
				button.delete-element
					i.fa.fa-trash-o
				button.options
					i.fa.fa-cogs
			.element-content
				img(src="http://unsplash.it/50/50")
		.element(data-element-name="menu")
			.element-icon
				i.fa.fa-align-justify
				.element-name Menu
			.element-controls
				button.delete-element
					i.fa.fa-trash-o
				button.options
					i.fa.fa-cogs
			.element-content
				ul.menu
					li home
					li about
					li projects
					li contact
		.element(data-element-name="spacer")
			.element-icon
				i.fa.fa-arrows-h
				.element-name Flex
			.element-controls
				button.delete-element
					i.fa.fa-trash-o
				button.options
					i.fa.fa-cogs
			.element-content
				i.fa.fa-arrows-h
		.element(data-element-name="cart")
			.element-icon
				i.fa.fa-shopping-cart
				.element-name Cart
			.element-controls
				button.delete-element
					i.fa.fa-trash-o
				button.options
					i.fa.fa-cogs
			.element-content
				button.mini-cart
					i.fa.fa-shopping-cart
					.cart-num 5
		.element(data-element-name="search")
			.element-icon
				i.fa.fa-search
				.element-name Search
			.element-controls
				button.delete-element
					i.fa.fa-trash-o
				button.options
					i.fa.fa-cogs
			.element-content
				button.search
					i.fa.fa-search
	#preview
		.element(data-element-name="logo")
			.element-icon
				i.fa.fa-adn
				.element-name Logo
			.element-controls
				button.delete-element
					i.fa.fa-trash-o
				button.options
					i.fa.fa-cogs
			.element-content
				img(src="http://unsplash.it/50/50")
		.element(data-element-name="menu")
			.element-icon
				i.fa.fa-align-justify
				.element-name Menu
			.element-controls
				button.delete-element
					i.fa.fa-trash-o
				button.options
					i.fa.fa-cogs
			.element-content
				ul.menu
					li home
					li about
					li projects
					li contact
		.element(data-element-name="spacer")
			.element-icon
				i.fa.fa-arrows-h
				.element-name Flex
			.element-controls
				button.delete-element
					i.fa.fa-trash-o
				button.options
					i.fa.fa-cogs
			.element-content
				i.fa.fa-arrows-h
		.element(data-element-name="cart")
			.element-icon
				i.fa.fa-shopping-cart
				.element-name Cart
			.element-controls
				button.delete-element
					i.fa.fa-trash-o
				button.options
					i.fa.fa-cogs
			.element-content
				button.mini-cart
					i.fa.fa-shopping-cart
					.cart-num 5
		

script.babel

var builder = dragula([document.getElementById("elements"), document.getElementById("preview")], {
	copy: function(el, source) {
		return source === document.getElementById("elements")
	},
	accepts: function(el, target) {
		return target !== document.getElementById("elements")
	},
	removeOnSpill: true,
	direction: 'horizontal'
});

builder.on('drop', (el, container) => {
	var data = [];
	var elements = $(container).find(".element");

	$.each(elements, function(key, value) {
		data.push({
			'el': $(value).data('element-name'),
			'content': $(value).find(".element-content").html()
		});
	});
	builderOutput(data);
});

function builderOutput(data) {
	console.log(data);
}

$("#preview").on("click", '.delete-element', function(e) {
	e.preventDefault();

	var deleteEl = confirm("Are you sure want to delete this element?");

	if (deleteEl) {
		$(this).parents(".element").remove();
	}
});

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.1/dragula.min.js"></script>

style.stylus

@import 'https://fonts.googleapis.com/css?family=Karla';

*
	box-sizing border-box
body
	font-family karla
	color #666
	
#elements
	display flex
	justify-content center
	padding 20px 0
	transition .3s ease
	margin-bottom 30px
	
.element
	border 1px solid #e3e3e3
	border-radius 2px
	margin 0 5px
	min-width 64px
	position relative
	transition .3s ease
	
	&-icon
		text-align center
		padding 10px
		cursor pointer
		background-color white
		
		.fa
			margin-bottom 10px
	&-name
		font-size 14px
		
	&-controls
		border-radius 3px
		background-color rgba(0,0,0,.1)
		position absolute
		white-space nowrap
		transition .3s ease 
		opacity 0
		transform translateY(0) scale(0)
		left 0
		overflow hidden
		
		button
			border none
			background-color transparent
			padding 5px 10px
			transition .3s ease
			display inline-block
			
			&.delete-element
				&:hover
					background-color darken(red,20%)
					color white
			&.options
				&:hover
					background-color lighten(blue,20%)
					color white
	
	&-content
		display none

		
#preview
	background-color rgba(0,0,0,.1)
	border 1px solid #efefef;
	min-height 48px
	display flex
	flex-wrap wrap
	padding 0 15px
	width 1200px
	margin 0 auto
	
	.element
		min-width auto
		display flex
		align-items center
		margin 0
		
		&:hover
			background-color rgba(0,0,0,.1)
			
		&-icon
			display none
		&-content
			display block
			
		&[data-element-name="logo"]
			img
				display block
		
		&[data-element-name="spacer"]
			flex 1 0 auto
			text-align center
			align-self stretch
			display flex
			align-items center
			justify-content center
			transition .3s ease
			
			
		&:hover
			.element-controls
				pointer-events auto
				opacity 1
				transform translateY(-100%) scale(1)
		
			
ul.menu
	list-style none
	padding-left 0
	li
		display inline-block
		padding 10px 20px

.mini-cart
	border none
	background-color transparent
	position relative
	
	.cart-num
		position absolute
		top -5px
		right -5px
		background-color #bad455
		padding 2px 4px
		border-radius 40px
		color white
		font-size 12px
button.search
	background transparent
	border none

.element.gu-mirror
	
	min-width 64px
	max-width 64px!important;
		
	&-content
		display none

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.1/dragula.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />

xoypaa.markdown

xOyPaa

A Pen by Rian Ariona on CodePen.

License.