jQuery UI Selectable not working with div (resizable & draggable)

Question

I have some div's and have applied resizable & draggable methods to it. But when i apply the selectable method, it does not emit the "ui-selected" into the class of the DIV.

Pls suggest the workaround for this problem.

Below is the code:-

<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.20.custom.min.js" type="text/javascript"></script>
<link href="development-bundle/themes/base/jquery.ui.resizable.css" rel="stylesheet" type="text/css" />
<link href="development-bundle/themes/base/jquery.ui.theme.css" rel="stylesheet" type="text/css" />

<style type="text/css">
    .dragClass {
            font-family: Tahoma, sans;
            color: black;
            background: orange;
            border: 1px solid orange;
            width: 10em;
            height:auto;
            padding: 0.5em;
        }

    textarea {
            font-family: inherit;
            color: inherit;
            background: transparent;
            border: 0;
            width: 100%;
            height: 100%;
            resize: none;
        }
</style>

<script type="text/javascript" language="javascript">
    $(function () {
        $(".dragImgClass").draggable({ delay: 100, containment: "#ParentDIV", scroll: false });
        $(".dragClass").draggable({ delay: 100, containment: "#ParentDIV", scroll: false });
        $(".dragClass").resizable();
        $(".dragClass").selectable();

        $(".dragClass").on("click", function (event) {
            // Don't do anything if already editing                
            if ($(this).find("textarea").length) return;

            var $this = $(this); //get current obj.

            // Replace paragraph with textarea
            var $p = $this.find("p");
            var $txtar = $('<textarea/>').val($p.text());
            $p.replaceWith($txtar);
            $txtar.focus();                
        });

        $(".dragClass").on("blur", "textarea", function () {
            // Replace textarea with paragraph
            var $txtar = $(this);
            var $p = $('<p/>').text($txtar.val());
            $txtar.replaceWith($p);
        });

    });  //End of DOM Ready

    function getHTML() {
        var dv = $('#ParentDIV');
        var dvCont = $('#dvHtml');
        dvCont.css('border','2px solid red').text(dv.html());
    }

</script>

Below is the HTML Content:-

<input id="Btn1" type="button" onclick="getHTML();" value="Extract HTML" />
<div id="dvHtml"></div>
<br /><br />
   <div id="ParentDIV" style="margin-left:200px; width:800px; height:500px; background:lightgray;">                    
       <div class="dragClass"><p>Drag me around!</p></div>
       <br /><br />
       <div class="dragClass"><p>Drag me around! also</p></div>        
       <br /><br />
       <img class="dragImgClass" src="logo3.JPG" />
       <br /><br />
       <img class="dragImgClass" src="logo4.JPG" />        
   </div>

Here is jsFiddle of my problem

i added a js fiddle in your question jsfiddle.net/yyzRu/1 so that it will be easy to answer for our SO fellows :) i can see the class of selectable div in firebug "dragClass ui-draggable ui-resizable ui-selectable" — Devjosh
– Devjosh, Commented Jun 6, 2012 at 8:32

Devjosh · Accepted Answer · 2012-06-06 16:15:22Z

1

i can see in firebug that your Selectable div emits proper css like this "dragClass ui-draggable ui-resizable ui-selectable" inspect it in firebug/IE developer tools or any other tool it is there here is a jsfiddle to your problem i can see the selectable class applied to the div clearly in firebug.

EDIT

to disable draggable & resizable you can do it like

$('.dragclass').draggable( 'disable' );
$('.dragclass').resizable( 'disable' );

edited Jun 6, 2012 at 16:15

answered Jun 6, 2012 at 8:21

Devjosh

6,4824 gold badges41 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Karan Over a year ago

When i click the text div, it does not emit the "ui-selected" class and that is the problem.

Devjosh Over a year ago

it will not emit the ui-selectable alone @karan it will be grouped with "dragClass ui-draggable ui-resizable" because theses classes are also applied to the same div at the same time

Karan Over a year ago

Example jqueryui.com/demos/selectable/#event-selected emits the ui-selected into the markup.

Devjosh Over a year ago

it's because draggable and resizable functions are not applied in that example

Karan Over a year ago

You are right, the application of draggable and resizable is doing the interference to the selectable feature..

|

Collectives™ on Stack Overflow

jQuery UI Selectable not working with div (resizable & draggable)

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related