Как мога да активирам „draggable“ на елемент с contentEditable?

Бих искал да имам div, който едновременно може да се редактира и плъзга с помощта на jQuery UI. Възможността за редактиране на съдържание изглежда работи само ако възможността за плъзгане не е активирана. Изпускам ли нещо? Използвам jQuery 1.4.4 и jQuery UI 1.8.9

JavaScript:

$(function(){
    $('#draggable').draggable();
});

HTML:

<div contenteditable="true" id="draggable">TEXT</div>

jquery contenteditable jquery-ui-draggable
person Tommy    schedule 10.02.2011    source източник
comment
кой редактируем плъгин използвате?   -  person Vivek    schedule 10.02.2011
comment
това не е плъгин - contenteditable е просто HTML5 атрибут   -  person Tommy    schedule 10.02.2011

Отговори (4)


arrow_upward
13
arrow_downward

Работи, но jQuery draggable отвлича събитие за щракване. Все още можете да отидете до него. Това е бързо решение.

$('#draggable').draggable().bind('click', function(){
  $(this).focus();
})
person Krule    schedule 10.02.2011
comment
Проблемът с това е, че focus() задава курсора в началото, а не там, където е щракнато. - person tybro0103; 30.06.2011

arrow_upward
16
arrow_downward

Докато отговорът, предоставен от Krule, ще работи, има проблем с използваемостта. Курсорът винаги ще се показва в началото на областта за редактиране, когато се щракне. Това прави невъзможно избирането на текст с мишката. Единственият начин да преминете към област от текст е да използвате клавишите със стрелки. Не вярвам, че това е приемливо.

Единственото решение, което успях да измисля, е да използвам "дръжка" за плъзгане:

<style>
.positionable {
    position:absolute;
    width:400px; height:200px;
}
.drag_handle {
    position:absolute;
    top:-8px; left:-8px;
    background-color:#FFF; color:#000;
    width:14px; height:14px;
    cursor:move;
    font-size:14px; line-height:14px;
    font-weight:bold;
    text-align:center;
    border:1px solid #000;
}
.editable {
    outline:none;
    width:100%; height:100%;
}
</style>

<div class="positionable">
    <div class="drag_handle">+</div>
    <div class="editable" contentEditable="TRUE">type here...</div>
</div>

<script>
    $('.positionable').draggable({handle: '.drag_handle'});
</script>
person tybro0103    schedule 06.07.2011
comment
Полезен фрагмент. Притесних се, че само аз имам проблем, очевидно всички въпроси вече са зададени/отговорени. - person Mars Robertson; 15.11.2012

arrow_upward
3
arrow_downward

можете да дадете на този div "родител div" и да добавите draggable събитие към него родител. след това използвайте официалния API „отказ“

HTML:

<div id="draggable">
    <div contenteditable="true" class="editable">TEXT</div>
</div>

JS:

 $('#draggable').draggable({cancel: '.editable'});
person oliver34    schedule 11.04.2017

arrow_upward
1
arrow_downward

Това ме подлуди - но има начин да го направя без дръжка за плъзгане. Използвайте различен таг за вашия редактируем елемент и предотвратете плъзгането на този елемент http://api.jqueryui.com/draggable/#option-cancel

person user3046913    schedule 28.11.2013