CODEWITHSUNDEEP
javascriptjqueryhtmldraggablecontenteditable
Earl Bunao
Earl Bunao

Reputation: 205

jQuery draggable/contenteditable code not responding correctly

I looked up this code from another post:

<div id="d" contenteditable="true">
    Text to edit
</div>

<script>
$("#d")
    .draggable()
    .click(function(){
        $(this).draggable( "option", "disabled", true );
    })
    .blur(function(){
        $(this).draggable( 'option', 'disabled', false);
    });
</script>

The link is this: http://jsfiddle.net/UH9UE/222/

The problem is, when the jQuery version is on 1.7, the highlighting and 'selectability' of the object is smooth. But when it is switched to 2.0.2, it doesn't function the same. I am using the later version for my project that's why I can't roll back to the older version.

Upvotes: 1

Views: 201

Answers (1)

Derek
Derek

Reputation: 480

There is a way to achieve this with css. Add this function in your javascript 

$.fn.drags = function(opt) {
    opt = $.extend({handle:"",cursor:""}, opt);

    if(opt.handle === "") {
        var $el = this;
    } else {
        var $el = this.find(opt.handle);
    }
    return $el.css('cursor', opt.cursor).on("mousedown", function(e) {
        if(opt.handle === "") {
            var $drag = $(this).addClass('draggable');
        } else {
            var $drag = $(this).addClass('active-handle').parent().addClass('draggable');
        }
        var z_idx = $drag.css('z-index'),
            drg_h = $drag.outerHeight(),
            drg_w = $drag.outerWidth(),
            pos_y = $drag.offset().top + drg_h - e.pageY,
            pos_x = $drag.offset().left + drg_w - e.pageX;
        $drag.css('z-index', 1000).parents().on("mousemove", function(e) {
            $('.draggable').offset({
                top:e.pageY + pos_y - drg_h,
                left:e.pageX + pos_x - drg_w
            }).on("mouseup", function() {
                $(this).removeClass('draggable').css('z-index', z_idx);
            });
        });
        //e.preventDefault(); // uncomment to avoid making editable
    }).on("mouseup", function() {
        if(opt.handle === "") {
            $(this).removeClass('draggable');
        } else {
            $(this).removeClass('active-handle').parent().removeClass('draggable');
        }
    });

}

And simply call it using this

$("#d").drags();

JSFiddle

Made some modifications from the original code found here to suit your needs.

Upvotes: 1

Related Questions