[英]Drag and drop button inside textarea using JQUERY
大家好,
Below is my sample screenshot.
我想輸入類似段落和空格數以及以下選項的輸入。 最初,我將選擇段落所需的空白數。 在選擇按鈕的基礎上,它會像選擇1,2等一樣可見。之后,我將該按鈕拖放到段落文本區域內,這樣對於任何數量的選擇,它將以該位置作為第一個空白。 在這種情況下,我嘗試了很多不同的操作,例如下面的鏈接。如果拖放,它將放在段落的初始位置或段落的末尾。 我想放在段落內的任何位置。 我無法解決此問題,因此正在尋求幫助。
的HTML
<ul id="left-pane">
<li>
<div align="center" style="width:100px;border:3px solid #ddd; padding:5px;cursor:move;background:#eee;">Drag Me</div>
</li>
</ul>
<ul id="right-pane"></ul>
JS
$("#left-pane li").draggable({
containment: '#gbox',
cursor: 'move',
helper: 'clone',
scroll: false,
connectToSortable: '#right-pane',
appendTo: '#right-pane',
start: function () {},
stop: function (event, ui) {}
}).mousedown(function () {});
$("#right-pane").sortable({
sort: function () {},
placeholder: 'ui-state-highlight',
receive: function () {},
update: function (event, ui) {}
});
$("#right-pane li").live('dblclick', function () {
$(this).remove();
})
$("#right-pane").droppable({
accept: "#left-pane li",
accept: ":not(.ui-sortable-helper)",
drop: function (event, ui) {
if ($(ui.draggable).find('.single-item').length == 0)
{
$(ui.draggable).html("<div align=\"center\" style=\"width:100px;border:3px solid #ddd; padding:5px;cursor:move;background:#eee;\">Drag Me</div>");
}
}
});
$("#left-pane").droppable({
accept: "#right-pane li",
drop: function (event, ui) {}
});
$("ul, li").disableSelection();
的CSS
#left-pane {
border: 1px solid black;
min-width: 100px;
min-height: 100px;
}
#right-pane {
border: 1px solid black;
min-width: 100px;
min-height: 100px;
}
.single-item {
border:2px solid #ddd;
background:#fff;
margin:30px;
padding:10px;
}
這與您的問題類似。 查看下面的小提琴
還請查看此JSBin演示
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.