JSFiddle - React, Tailwind, and code Playground

by MaherSalam

HTML

<link rel="stylesheet" href="http://mahersalam.co.cc/projects/namodgMaker/css/reset.css">
<link rel="stylesheet" href="http://mahersalam.co.cc/projects/namodgMaker/css/960.css">
<link rel="stylesheet" href="http://mahersalam.co.cc/projects/namodgMaker/css/plugins.css">
<link rel="stylesheet" href="http://mahersalam.co.cc/projects/namodgMaker/css/core.css">
<div id="namodg-maker">
    
    <div class="inner container_12" style="min-height: 600px;">
        
        <section class="grid_6" id="namodg-form-wrapper">
            
                <div id="namodg-form-header">
                    <h1><img alt="message" src="images/form/header/message-icon.png">تواصل معنا</h1>
                    <div id="namodg-form-header-right"></div>
                    <div id="namodg-form-header-left"></div>
                </div> <!-- #namodg-form-header -->
            
                <div id="namodg-form" class="ui-sortable">
                    
                <div class="namodg-maker-textfield" style=""><p contenteditable="true" class="field-description">انقر لتعديل وصف الحقل</p><label contenteditable="true" for="name">انقر لتعديل أسم الحقل</label><div class="field-shade"><input type="text" value="" title="انقر لتعديل وصف الحقل" id="name" name="الاسم" disabled="disabled"><div class="field-options"><a class="drag-field-option" title="قم بسحب الحقل للأعلى او الاسفل لتغيير موضعه" href="#">تحريك الحقل</a><a class="edit-field-option" title="تعديل الحقل" href="#">تعديل الحقل</a><a class="remove-field-option" title="حذف الحقل" href="#">حذف الحقل</a><div class="field-options-tip"></div></div></div></div><div class="namodg-maker-email" style=""><p contenteditable="true" class="field-description">انقر لتعديل وصف الحقل</p><label contenteditable="true" for="email">انقر لتعديل أسم الحقل</label><div class="field-shade"><input type="text" value="" title="انقر لتعديل وصف الحقل" id="email" name="الايميل" data-validation="email" disabled="disabled"><div class="field-options"><a...

CSS

#namodg-form .field-drag-placeholder {
     height: 80px;   
}

/* over-write the hidding */

#namodg-form .field-options {
 display: block !important;   
}

JavaScript

// jQuery UI sortable fixer - dirty and static fix for now
$.extend($['ui']['sortable'].prototype, {
    _intersectsWithPointer: function(item) {

        var isOverElementHeight = $.ui.isOverAxis(this.positionAbs.top + this.offset.click.top, item.top, item.height),
                isOverElementWidth = $.ui.isOverAxis(this.positionAbs.left + this.offset.click.left /* THIS IS THE FIX */ + 50 /* END FIX */, item.left, item.width),
                isOverElement = isOverElementHeight && isOverElementWidth,
                verticalDirection = this._getDragVerticalDirection(),
                horizontalDirection = this._getDragHorizontalDirection();

        if (!isOverElement)
                return false;

        return this.floating ?
                ( ((horizontalDirection && horizontalDirection == "right") || verticalDirection == "down") ? 2 : 1 )
                : ( verticalDirection && (verticalDirection == "down" ? 2 : 1) );

    }
});

$(function() {
    
    // save the form holder
    var formHolder = $('#namodg-form');
    
    // attach sortable
    formHolder
        .sortable({
            containment: 'parent',
            opacity: 0.6,
            axis: 'y',
            tolerance: 'pointer',
            placeholder: 'field-drag-placeholder',
            forcePlaceholderSize: true,
            cursor: 'n-resize',
            handle: '.drag-field-option',
            start: function(e, ui) {
                ui.item.find('.field-options')
                    .data('dragged', true);
            },
            stop: function(e, ui) {
                ui.item.find('.field-options')
                    .data('dragged', false);
            }
        });
});