Value Chain Drag-n-Drop

by Erik Bartlow

HTML

<script src="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700,300italic&#39;"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://thebartlows.com/scripts/iconsprite/vc-clear.css">
<link rel="stylesheet" href="http://thebartlows.com/scripts/iconsprite/vc-viewer.css">
<link rel="stylesheet" href="http://thebartlows.com/scripts/iconsprite/vc-theme-main.css">
<div class="vc-row vc-color-base-border">
    <div class="vc-header vc-vertical-first vc-color-top-header">
        <div class="vc-title vc-rotate">Title</div>
    </div>
    <div class='vc-add-row vc-color-base-border'>
         <h2>+</h2>

    </div>
</div>

<h2 style="width: 100%;">Base Item Element with Spanning Bar</h2>

<!--p>Move your mouse over the right and left hand sides of the element.</p>
<div style="width: 200px;">
    <div class="vc-flex vc-right vc-element vc-color-base-border resizable">
        <div class="vc-item-span-clear"></div>
        <div class="vc-ItemTitle">Item Title</div>
        <div class="vc-flex-vertical vc-center vc-options">
            <div class="vc-icons vc-icon-options"></div>
        </div>
        <div class="vc-item-span-clear"></div>
    </div>
</div-->

<h2 style="width: 100%;">Grouped Elements</h2>

<div class="vc-flex vc-element-group vc-row-content"></div>
<div class="vc-flex vc-element-group ">
    <div class="vc-flex vc-right vc-element vc-element-area vc-color-base-border resizable">
        <div class="vc-item-span-clear"></div>
        <div class="vc-ItemTitle">Item Title 1</div>
        <div class="vc-flex-vertical vc-center vc-options">
            <div class="vc-icons vc-icon-options"></div>
        </div>
        <div class="vc-item-span-clear"></div>
    </div>
    <div class="vc-flex vc-right vc-element vc-element-area vc-color-base-border...

CSS

body {
    font-size: 1em;
    font-family:'Open Sans Condensed', sans-serif;
}
.vc-flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.vc-flex-vertical {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
}
.vc-center {
    justify-content: center;
    align-items: center;
}
.vc-right {
    justify-content: flex-end;
    align-items: center;
}
.vc-hidden {
    display:none;
}
.vc-element {
    position: relative;
    border: 1px solid;
    background-color: #CCCCCC;
    border-radius: 10px;
    min-height: 40px;
    min-width: 200px;
}
.vc-element-area {
    background-color: #adb9ca !Important;
    height: 80px !Important;
}
.vc-element-event {
    background-color: #f2f8ee !Important;
    height: 40px !Important;
    font-size: .5em;
    text-transform: uppercase;
}
.vc-element-event .vc-options {
    height: 40px;
}
.vc-element-event .vc-action-text-glow {
    -webkit-filter: invert(0%);
    filter: invert(0%);
}
.vc-element-event .vc-item-span-clear {
    height: 48px !Important;
    top: -4px;
}
.vc-element-group > div:first-child {
    border-top-left-radius: 10px !Important;
    border-bottom-left-radius: 10px !Important;
    border-left-width: 1px;
}
.vc-element-group > div:last-child {
    border-top-right-radius: 10px !Important;
    border-bottom-right-radius: 10px !Important;
}
.vc-element-group > div:last-child .vc-options {
    border-top-right-radius: 10px !Important;
    border-bottom-right-radius: 10px !Important;
}
.vc-element-group div {
    border-radius: 0px;
    border-left-width: 0px;
}
.vc-ItemTitle {
    background-color: transperant;
    text-align: center;
    width: 100%;
    font-size: 1.4em;
    font-weight: normal;
}
.vc-options {
    flex-direction: column;
    min-width: 32px;
    max-width: 32px;
    width: 32px;
    height: 80px;
    background-color:...

JavaScript

$('.vc-add-row').hover(function (e) {
    $(this).parent().addClass('vc-action-glow');
    $(this).addClass('vc-action-glow');
}, function (e) {
    $(this).parent().removeClass('vc-action-glow');
    $(this).removeClass('vc-action-glow');
});

$('.vc-ItemTitle').hover(function (e) {
    $(this).addClass('vc-action-text-glow');
}, function (e) {
    $(this).removeClass('vc-action-text-glow');
});
$('.vc-item-span-clear').hover(function (e) {
    showSpanOption(e);
}, function (e) {

});

$('.resizable').resizable({
    handles: 'e'
});

$('.vc-element-group').sortable({
    connectWith: ".vc-element-group",
    handle: ".vc-options",
    tolerance: "pointer",
    cursor: "move"
});

// Add span event capture.
function showSpanOption(e) {
    var item = $(e.target);
    $(item).hover(function (e) {
        $(this).addClass('vc-item-span');
    }, function (e) {
        $(this).removeClass('vc-item-span');
    });
}