jQuery UI Выбираемый не работает с div (resizable & draggable)

Question

У меня есть div и применил resizable & перетаскиваемые методы к нему. Но когда я применяю выбранный метод, он не выделяет «ui-selected» в класс DIV.

Pls предлагает обходной путь для решения этой проблемы.

Ниже приведен код: -

<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> 

Ниже 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 является jsFiddle моей проблемы

Answer 1

я могу увидеть в поджигатель что ваш Selectable div испускает правильный css, как этот "dragClass ui-draggable ui-resizable ui-selectable" i nspect это в инструментах разработчика firebug/IE или любом другом инструменте, который есть вот jsfiddle к вашей проблеме Я могу видеть выбранный класс, примененный к div явно в firebug.

EDIT

отключить перетаскиваемым & изменяемыми вы можете сделать это, как

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