我有一个带有可拖动div的页面的代码。最初，我有代码的前两行，使div可拖动并指定拖动句柄。然后我需要添加一个辅助函数来克隆draggable。当我添加辅助函数时，它破坏了代码。 div不再可以拖延了。我编写可以解释这个问题的代码的方式是什么？
<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({});，那么第二次通话就会破坏可拖动的行为。由于我是新手，因此必须存在以这种方式构造代码的基本问题。
更新
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中创建draggables的代码。
<?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();
?>
更新10/24/2011
如此指定的Draggable在PHP响应中回显。
echo "<script type='text/javascript'>\n";
echo " $('#".$url['ID'].".link').draggable();\n";
echo "</script>\n";
像这样指定的Draggable会破坏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语句中，它就无济于事。有没有更好的方法将该语句发送到页面？
答案 0 :(得分：1)
您必须组合选项：
$('#".$url['ID'].".link').draggable({
handle: '.link_handle',
helper: function() {
$copy = $(this).clone();
$(this).remove();
return $copy;
},
appendTo: 'body',
scroll: false
});
=== UPDATE ===
我做了example。这里所有选项都有效：
handle：您只能通过点击蓝色div appendTo：拖动期间可拖动帮助器的容器是正文scroll：在禁用拖动时自动滚动容器（将其打开以查看不同的内容）helper：在示例中有四个可拖动的，每个都有一个不同的helper选项：
original：将拖动原始div clone：拖动时会显示一个克隆function 1：没有删除的帮助函数与clone选项相同function 2：您的帮助程序功能删除原始拖动功能并在拖动时显示克隆答案 1 :(得分：0)
您只需要为每个可拖动的元素调用draggable（）一次。任何其他调用将基本上覆盖以前的可拖动功能。查看jquery ui site上的示例。