drag

by amkrtchyan

HTML

<div class="main-box">
            <div class="left-box">
                <div class="search-box">
                    <input type="text" placeholder="Search">
                    <i class="icon-search"></i>
                </div>
                <div class="accordion-wrap">
                    <div class="accordion-item">
                        <h3 class="accordion-title">
                            Accordion title 1
                            <i class="icon-triangle-down"></i>
                        </h3>
                        <div class="accordion-content">
                            <div class="draggable-item" draggable="true" data-drag-value="emptyBox">empty box</div>
                            <div class="draggable-item"  draggable="true" data-drag-value="fieldWrap">field wrap</div>
                            <div class="draggable-item"></div>
                            <div class="draggable-item"></div>
                            <div class="draggable-item"></div>
                            <div class="draggable-item"></div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h3 class="accordion-title">
                            Accordion title 2
                            <i class="icon-triangle-down"></i>
                        </h3>
                        <div class="accordion-content">
                            <div class="draggable-item"></div>
                            <div class="draggable-item"></div>
                            <div class="draggable-item"></div>
                            <div class="draggable-item"></div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h3 class="accordion-title">
                            Accordion title 3
                            <i class="icon-triangle-down"></i>
                        </h3>
                        <div...

SCSS

.form-box {
			padding: 15px;
			background-color: grey;
			border-radius: 6px;
			border: 1px dashed transparent;
			min-height: 500px;
		}
    
    .row-box {
	width: 100%;
	min-height: 100px;
	padding: 10px;
	border-radius: 6px;
	border:1px solid blue;
	margin-bottom: 15px;
	&:last-child {
		margin-bottom: 0px;
	}
}

.row-box-title {
	font-size: 16px;
	font-weight: 400;
	color: blue;
	margin-bottom: 10px;
}

JavaScript

const container = $('.form-box[data-drag="container"]');
    const elementsWrap = $('.dropped-elements-wrap');
    const body = $('body');
    let elem;

    const properties = `
        <div class="wizard-form-properties-box">
            <div class="wrapper">
                <div class="properties-container">
                    <i class="icon-close wizard-remove"></i>
        
                    <div class="field-wrap">
                        <div class="field-label">Label Text</div>
                        <div class="field-box">
                            <input type="text" placeholder="Input Label Text" data-input="change-label" />
                        </div>
                        <div class="field-box">
                            <input id="1" type="checkbox">
                            <label for="1"><i></i><span>Hidden</span></label>
                        </div>
                        <div class="field-box">
                            <input id="2" type="checkbox">
                            <label for="2"><i></i><span>XML</span></label>
                        </div>
                        <div class="field-box">
                            <input id="3" type="checkbox">
                            <label for="3"><i></i><span>Print</span></label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `;

    const emptyBox = `<div class="row-box"data-drag="sub-container">
                    <div class="row-box-title label-text" data-text="Title">Title</div>
                    <ul></ul>
               </div>`;
               const fieldWrap = `
               <div class="field-wrap">
                                <div class="field-label label-text">Label Text</div>
                                <div class="field-box">
                                    <input type="text" placeholder="Input placeholder">
                                </div>
                           ...