不能編輯可拖動的div

我有這個代碼塊，我也改編自互聯網的內容：不能編輯可拖動的div

<script> 
    $.count = 1; 
    $(function() { 
     $('#object1') 
      .click(function(){ 
       var htmlData='<div id="'+$.count+'" class="draggable ui-widget-content ui-draggable" style="height:100px; width:100px;'; 
       htmlData += '"'; 
       htmlData += '><div id="editable'+$.count+'" style="color:black">Object</div><div id="pos'+$.count+'X"></div><div id="pos'+$.count+'Y"></div></div>'; 
       $('.demo').append(htmlData); 
       $('.draggable').draggable({ 
        drag: function(){ 
         var offset1 = $(this).offset(); 
         var xPos1 = offset1.left; 
         var yPos1 = offset1.top; 
         var element = $(this).attr('id'); 
         $('#pos'+element+'X').text('x: ' + xPos1); 
         $('#pos'+element+'Y').text('y: ' + yPos1); 
        } 
      }) 
      .resizable() 
      .mousedown(function(ev) { 
       $(this).draggable('disable'); 
      }).mouseup(function(ev) { 
       $(this).draggable('enable'); 
      }); 
      $.count++; 
     }); 
    }); 

</script> 

<div class='demo'></div>

我在做什麼基本上是動態進行拖動文本框。現在，我正在嘗試編輯創建的任何文本框的div中的文本，但不能更改它，只是突出顯示是否單擊，然後釋放我的鼠標時，它會返回到其原始狀態。其實，我想把這個代碼http://jsfiddle.net/cSMYG/121/與我正在做的事情結合起來。那是在編輯div中的文本。

這裏的鏈接：http://jsfiddle.net/VRTf8/1/ 我不能編輯的對象

來源

2014-02-27 Earl Bunao

你能爲你的問題做一個jsfiddle嗎？ – Jaime

我已經添加了示例。 –

-1

只是可以肯定的內容，你鏈接到小提琴包括jQuery UI 。你是否將它包含在你的頁面中？

來源

2014-02-27 17:31:18

是的，我相信我會加入jQuery UI。 –

如果他沒有拖動不起作用 – Jaime

我知道這是間接回答你的問題，但你可以指定一個句柄作爲可拖動代碼的一部分，這樣只有部分給定元素觸發拖動事件。

下面是代碼JSFiddle Version的簡化版本：

$('#object1').click(function(){ 
    var newBox = $("<div>", {id: $.count, class: "mybox"}) 
     .append($("<div>", {class: "boxtitle"}).html("Object")) 
     .append($("<div>", {class: "boxcediv", contenteditable: true})); 
    newBox.draggable({handle: ".boxtitle"}).resizable(); 
    $.count++; 
    $('.demo').append(newBox); 
});

這將創建一個既「標題」和CONTENTEDITABLE區域輸入文本股利。標題被設置爲句柄，以便您可以使用該標題拖動框。

希望這至少可以幫助你走向正確的方向。

來源

2014-02-27 18:51:17

不能編輯可拖動的div

回答

相關問題