1
ドラッグ可能なdivを持つページのこのコードはあります。最初は、コードの最初の2行をドラッグしてドラッグ可能にし、ドラッグハンドルを指定しました。次に、ドラッグ可能なオブジェクトを複製するヘルパー関数を追加する必要がありました。ヘルパー関数を追加すると、コードが壊れました。ディビジョンはもはやドラッグできませんでした。これを説明するコードを書いたやり方はどうですか？ ドラッグ可能な要素のメソッドの呼び出し
<script type='text/javascript'>
$('#".$url['ID'].".link').draggable();
$('#".$url['ID'].".link').draggable('option', 'handle', '.link_handle');
$('#".$url['ID'].".link').draggable({
helper: function(){
$copy = $(this).clone();
$(this).remove();
return $copy;
},
appendTo: 'body',
scroll: false
});
</script>
.draggable();を持っている場合、別のコール
.draggable({});、その2回目の呼び出しは、ドラッグ可能な行動を壊すことがわかりました。私はこれに新しいので、コードをそのように構造化することには基本的な問題がなければなりません。
UPDATE
draggablesは、このように呼ばれるPHPスクリプトによって作成されます。
<div id="page"> <!-- Begin page div -->
<script type="text/javascript">
$(document).ready(function() {
// Make ajax call to recreate linkcards from XML data
$.ajax({
url: "get_nodes.php",
type: "POST",
data: { },
cache: false,
success: function (response) {
if (response != '')
{
$("#page").append(response);
}
}
});
});
</script>
</div> <!-- End page div -->
これは、ドラッグ可能なアイテムを作成するget_nodes.phpのコードです。
<?php
function get_nodes() {
// load SimpleXML
$nodes = new SimpleXMLElement('linkcards.xml', null, true);
foreach($nodes as $node) // loop through
{
// Add LinkCard
echo "<div id = '".$node['ID']."' class= 'linkcard ui-widget-content' style = 'top: ".$node->TOP."px; left: ".$node->LEFT."px; width: ".$node->WIDTH."px; height: ".$node->HEIGHT."px;'> \n";
echo " <p class = 'linkcard_header editableText'>".$node->NAME."</p>\n";
echo " <div class='toolbar'> <a href='#' title='Options' class='ico_tools'></a> <a href='#' title='Delete' class='ico_delete' onClick=\"delete_linkcard('".$node['ID']."');\"></a> </div>\n";
echo " <div class='link_drop_box'>\n";
// Add links
foreach($node->LINKS->LINK as $url)
{
$urlico = substr($url->URL,7);
// Add link with tools
echo ' <div id="'.$url['ID'].'" class="link"> <img class="link_handle" src="http://www.google.com/s2/favicons?domain='.$urlico.'" align="middle" /> <a href="'.$url->URL.'" target="_blank" onmouseOver="preview_link(\'show\', this, \''.$node['ID'].'\');" onmouseOut="preview_link(\'hide\', this, \''.$node['ID'].'\');" >'.$url->TITLE.'</a> <a title="Edit" class="link_button_edit" href="#" onClick=""></a><a title="Delete" class="link_button_delete" href="#" onClick="delete_link(\''.$url['ID'].'\', \''.$node['ID'].'\');"> </a> </div>';
// Make link draggable
echo "<script type='text/javascript'>\n";
echo " $('#".$url['ID'].".link').draggable({
handle: '.link_handle',
helper: function() {
$copy = $(this).clone();
$(this).remove();
return $copy;
},
appendTo: 'body' ,
scroll: false
}); \n";
echo "</script>\n";
}
echo "</div> \n";
// Add scrolling buttons
echo '<div class="scrolling_prev" title="Previous"></div>';
echo '<div class="scrolling_next" title="Next"></div>';
// Add LinkCard tools
echo " <div class='tools' > <a href='#' title='Add Link' class='ico_add' onClick=\"add_link('".$node['ID']."');\"></a> <a href='#' title='Search Links' class='ico_search' onClick=\"open_search('".$node['ID']."');\"></a> </div>\n";
echo ' <script type="text/javascript">
$(document).ready(function($) {
$(".scrolling_prev", $("#'.$node['ID'].'")).mousedown(function() {
startScrolling($(".link_drop_box", $("#'.$node['ID'].'")), "-=50px");
}).mouseup(function() {
$(".link_drop_box", $("#'.$node['ID'].'")).stop()
});
$(".scrolling_next", $("#'.$node['ID'].'")).mousedown(function() {
startScrolling($(".link_drop_box", $("#'.$node['ID'].'")), "+=50px");
}).mouseup(function() {
$(".link_drop_box", $("#'.$node['ID'].'")).stop();
});
});
</script>';
echo "</div> \n";
echo "<script type='text/javascript'>\n";
echo " $('#".$node['ID']."').resizable();\n";
echo " $('#".$node['ID']."').draggable();\n";
echo " $('#".$node['ID']."').draggable('option', 'handle', '.linkcard_header');\n";
echo " $('#".$node['ID']."').draggable({ stop: function(event, ui) { update_linkcard_xml('".$node['ID']."') } });\n";
echo "</script>\n";
echo "<script type='text/javascript'>\n";
echo ' $("#'.$node['ID'].' '.CHR(46).'link_drop_box").droppable({
drop: function(event, ui) {
var $item = ui.draggable;
$item.fadeOut(function() {
$item.css({"left":"", "top":"", "bottom":"", "right":"" }).fadeIn();
});
$item.appendTo(this);
},
out: function(event, ui) {
},
accept: ".link",
});';
echo "</script>\n";
}
echo "<script type='text/javascript'>\n";
echo " $('.editableText').editableText();\n";
echo "</script>\n";
return;
}
echo get_nodes();
?>
UPDATE 2011年10月24日
これはPHP応答にエコーのように指定したドラッグ可能。
echo "<script type='text/javascript'>\n";
echo " $('#".$url['ID'].".link').draggable();\n";
echo "</script>\n";
このように指定すると、PHPの応答が壊れます。コードからの情報は返されません。
echo "<script type='text/javascript'>\n";
echo ' $("#'.$url['ID'].'.link").draggable({
handle: ".link_handle",
helper: function() {
$copy = $(this).clone();
$(this).remove();
return $copy;
},
appendTo: "body" ,
scroll: false
}); \n';
echo "</script>\n";
それぞれの行を別々のecho文に入れても、それは役に立ちません。その声明をページに送る良い方法はありますか？
これで問題は解決されませんでした。要素はそのコードでドラッグ可能ではないようです。ヘルパー、appendto、スクロールオプションが好きではないようです。 – user823527
私は自分の答えを更新しました。 – scessor
ありがとうございます。すべてがjsfiddleで動作します。さまざまなテストは私がやろうとしていることに役立ちます。しかし、私はまだ自分のコードに問題があります。ページが読み込まれると、javascriptがhtmlにエコーされます。これは、エコーされたスクリプトが、HTMLページ内のどこにスクリプトを置くかを決める前に起こりました。私はコードをどのように呼び出すかを示すために質問を更新しています。たぶんあなたはそれが何をすべきかをしない理由を伝えることができます。それはドラッグ可能ではあるが他のオプションでは機能しない。 – user823527