Drag and Drop jQuery with clone remove item revert with close button

Drag and Drop With Re sizable Image

Features

  • Drag able Element
  • Clone Element
  • Fit Drop able Area
  • Revert
  • Re sizable Element
  • Double Click Remove Element
  • Drag able Remove Area
  • Remove Button
HTML
<div id="wrapper">
    <div class="col" id="droppable"></div>
    <div class="col" id="col1">
        <div id="drag-list" class="drag-list">
            <ul>
                <li><span id="drag1" class="drag">
                        <img src="http://placehold.it/80x80/c9112d/fff&text=1" width="100%" height="100%" />
                    </span><span>Item 1</span> 
                </li>
                <li><span id="drag2" class="drag">
                        <img src="http://placehold.it/80x80/E68500/fff&text=2" width="100%" height="100%" />
                    </span><span>Item 2</span> 
                </li>
                <li><span id="drag3" class="drag">
                        <img src="http://placehold.it/80x80/00810C/fff&text=3" width="100%" height="100%" />
                    </span><span>Item 3</span> 
                </li>
                <li>
                    <div id="remove-drag" style="width: 100%; height: 80px; background-color: #FF8B8B;">
                        <div style="color: #fff; font-size: 20px; text-align: center; padding-top: 20px;">Remove
                            <div class="tip">Drop here</div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
jQuery
var x = null;
//Make element draggable
$(".drag").draggable({
    helper: 'clone',
    cursor: 'move',
    tolerance: 'fit',
    revert: true
});

$("#droppable").droppable({
    accept: '.drag',
    activeClass: "drop-area",
    drop: function (e, ui) {
        if ($(ui.draggable)[0].id != "") {


            x = ui.helper.clone();
            ui.helper.remove();
            x.draggable({
                helper: 'original',
                cursor: 'move',
                //containment: '#droppable',
                tolerance: 'fit',
                drop: function (event, ui) {
                    $(ui.draggable).remove();
                }
            });

            x.resizable({
                maxHeight: $('#droppable').height(),
                maxWidth: $('#droppable').width()
            });
            x.addClass('remove');
            var el = $("&lt;span&gt;&lt;a href='Javascript:void(0)' class="xicon delete" title="Remove"&gt;X&lt;/a&gt;&lt;/span&gt;");
            $(el).insertAfter($(x.find('img')));
            x.appendTo('#droppable');
            $('.delete').on('click', function () {
                $(this).parent().parent('span').remove();
            });
            $('.delete').parent().parent('span').dblclick(function () {
                $(this).remove();
            });
        }
    }
});

$("#remove-drag").droppable({
    drop: function (event, ui) {
        $(ui.draggable).remove();
    },
    hoverClass: "remove-drag-hover",
    accept: '.remove'
});
CSS
.col{float:left;margin:5px;padding:5px;}
#col1{width:200px;height:auto;border:1px solid black;}
img.drag{width:40px;height:40px;position:relative;}
#droppable{width:350px;height:340px;border:1px solid black;}
.right{float:right;}
.left{float:left;}
.clear{clear:both;}
ul li{list-style:none;}
.drag-list img{width:80px;vertical-align:middle;cursor:move;}
.drag-list ul{margin:0;padding:0;}
.drag-list li{margin-bottom:5px;}
.remove-drag-hover{background-color:#ED4949!important;}
.drop-area{background-color:#afd1b2;}
.xicon{margin-top:4px;position:absolute;margin-left:-17px;color:#FFF;font:message-box;text-decoration:none;}
.xicon:hover{background-color:#fff;color:#000;width:13px;height:20px;text-align:center;}
.tip{font-size:12px;clear:both;}
Drag and Drop jQuery with clone remove item revert with close button Drag and Drop jQuery with clone remove item revert with close button Reviewed by Bhaumik Patel on 5:57 PM Rating: 5