0
1つの要素（#add_text）をクリックすると、別の要素（#template）内にコンテンツ（#text_frame）が追加され、この要素（#text_frame）をドラッグできるコードがあります。 選択して削除する
$('#add_text').mousedown
(
function()
{
$('#add_text').css('background-color', 'blue'),
$('#template').prepend('<div id="text_frame"></div>'),
$('#text_frame').draggable('enable'),
$('#text_frame').draggable ({containment:'#safe_area',distance:1});
}
);
更新：これはSSCCEの風味で完全なコードです：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<title>Add/Delete</title>
<style type="text/css">
div#template
{
position: relative; outline: 1px #B7C4CE solid;
width: 556px; height: 320px; margin-left: auto; margin-right: auto;
}
div#text_frame
{
position:absolute; outline:1px silver solid; background-color:#F7F9FC; width: 96px;
height:24px; margin-top: 34px; margin-left: 32px; cursor: pointer;
}
div#add_text,div#delete_text
{
position: relative;
outline:1px silver solid; background-color:red; width: 99px; height: 20px;
margin-top: 15px; margin-left: auto; margin-right: auto;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.3.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
/* ------------------- add_text --------------------*/
$('#add_text').hover
(
function() {$('#add_text').css('outline', '1px blue solid');},
function() {$('#add_text').css('outline', '1px silver solid');}
);
$('#add_text').mousedown
(
function()
{
$('#add_text').css('background-color', 'blue'),
$('#template').prepend('<div id="text_frame"></div>'),
$('#text_frame').draggable('enable'),
$('#text_frame').draggable({containment: '#safe_area', distance: 1});
}
);
$('#add_text').mouseup
(
function()
{
$('#add_text').css('background-color', 'red');
}
);
/* ------------------- select_delete_text --------------------*/
$('#delete_text').hover
(
function() {$('#delete_text').css('outline', '1px blue solid');},
function() {$('#delete_text').css('outline', '1px silver solid');}
);
$('#delete_text').mousedown
(
function()
{
$('#delete_text').css('background-color', 'blue')
}
);
$('#delete_text').mouseup
(
function()
{
$('#delete_text').css('background-color', 'red');
}
);
$('#text_frame').click // dont work ???
(
function()
{
$('#text_frame').css('outline', '1px black solid');
}
);
});
</script>
</head>
<body>
<div id="template"></div>
<div id="add_text" class="font_button">add elements</div>
<div id="delete_text" class="font_button">delete elements</div>
<br /><br />1) Press the button several times "add elements"<br />
2) drag items<br /><br />
how to make:<br /><br />
1) Select Item<br />
2) change of style (outline color for example) element when it is selected<br />
3) Remove the chosen item by pressing the button "delete elements"<br />
</body>
</html>
私はjQueryのUIとjQueryのを使用しています。
スタックオーバーフローに投稿するとき、私はあなたの質問に対する解決策（私は本当にあなたが求めているものを理解していないとして）が、簡単なヒントを知らない：あなたの質問にタグ付けしてみてください適切に。 jQueryタグとJavaScriptタグを追加しました。あなたが持っていたもの、「削除する」、「選択したもの」は、その質問が何であるかを本当に誰にも知らせません。また、jQuery UIと一緒にjQueryフレームワークでJavaScriptを使用していることをあなたの投稿に示すことは役に立ちます。 – pinkfloydx33