Jquery 可拖动元素的调用方法
我有一个带有可拖动div的页面的代码。最初，我有代码的前两行，使divs可拖动，并指定一个拖动句柄。然后我需要添加一个helper函数来克隆draggable。当我添加helper函数时，它破坏了代码。那些潜水艇再也不能拖了。我写代码的方式有什么可能解释这一点Jquery 可拖动元素的调用方法,jquery,jquery-ui-draggable,Jquery,Jquery Ui Draggable,我有一个带有可拖动div的页面的代码。最初，我有代码的前两行，使divs可拖动，并指定一个拖动句柄。然后我需要添加一个helper函数来克隆draggable。当我添加helper函数时，它破坏了代码。那些潜水艇再也不能拖了。我写代码的方式有什么可能解释这一点 <script type='text/javascript'> $('#".$url['ID'].".link').draggable(); $('#".$url['ID'].".link').draggable('o
<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>
<?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();
?>
对于要使每个元素可拖动，只需调用draggable（）一次。任何其他调用基本上将覆盖以前的可拖动功能。查看上的示例。您只需要为每个要使其可拖动的元素调用draggable（）。任何其他调用基本上将覆盖以前的可拖动功能。查看上的示例。您必须组合以下选项：
$('#".$url['ID'].".link').draggable({
handle: '.link_handle',
helper: function() {
$copy = $(this).clone();
$(this).remove();
return $copy;
},
appendTo: 'body',
scroll: false
});
==更新===
我做了一个决定。在这里，所有选项都起作用：
句柄
：只能通过单击蓝色div来拖动divappendTo
：拖动过程中可拖动辅助对象的容器是主体滚动
：禁用拖动时容器自动滚动（打开它可查看不同的内容）helper
：在该示例中，有四个draggable，每个draggable具有不同的helper
选项：
original
：将拖动原始div克隆
：拖动时将显示克隆function 1
：没有删除的助手函数与clone
选项的操作相同函数2
：您的助手函数删除原始可拖动文件，并在拖动时显示克隆
您必须组合以下选项：
$('#".$url['ID'].".link').draggable({
handle: '.link_handle',
helper: function() {
$copy = $(this).clone();
$(this).remove();
return $copy;
},
appendTo: 'body',
scroll: false
});
==更新===
我做了一个决定。在这里，所有选项都起作用：
句柄
：只能通过单击蓝色div来拖动divappendTo
：拖动过程中可拖动辅助对象的容器是主体滚动
：禁用拖动时容器自动滚动（打开它可查看不同的内容）helper
：在该示例中，有四个draggable，每个draggable具有不同的helper
选项：
original
：将拖动原始div克隆
：拖动时将显示克隆function 1
：没有删除的助手函数与clone
选项的操作相同函数2
：您的助手函数删除原始可拖动文件，并在拖动时显示克隆
你是说我应该有.draggable（{'option'，…}，{helper:function（）{}）.draggable（{'option'，…}，{helper:function（）{}）未解决问题。该元素似乎无法使用该代码拖动。似乎不喜欢helper、appendto和scroll选项。谢谢。一切都在jsfiddle中工作。不同的测试有助于我尝试做的事情。但是我的代码仍然有问题。加载页面时，javascript会被回送到html中。以前发生过这样的情况，即回显脚本不会执行脚本在HTML页面中的位置时所执行的操作。我正在更新这个问题，向您展示我如何调用代码。也许你能告诉我为什么它不做它应该做的。它适用于draggable，但不适用于其他选项
并替换echo get_节点（）与获取_节点（）。但这并不能解决你的问题。因为我没有测试就看不到问题，你能解释一下到底发生了什么吗？什么好，什么不好？如果您可以发布ajax响应，这将非常有帮助。也许你有一个链接，我可以在那里测试它？克隆draggable的echo语句在php响应中根本没有回显。我把这句话放在更新里了。代码在该语句上中断。代码现在运行得更好了。引号/双引号一定有问题。现在克隆已创建。但是当我把它放到第二个容器时，这个容器有克隆和原始。这并没有解决问题。该元素似乎无法使用该代码拖动。似乎不喜欢helper、appendto和scroll选项。谢谢。一切都在jsfiddle中工作。不同的测试有助于我尝试做的事情。但是我的代码仍然有问题。加载页面时，javascript会被回送到html中。以前发生过这样的情况，即回显脚本不会执行脚本在HTML页面中的位置时所执行的操作。我正在更新这个问题，向您展示我如何调用代码。也许你能告诉我为什么它不做它应该做的。它适用于draggable，但不适用于其他选项
并替换echo get_节点（）与获取_节点（）。但这并不能解决你的问题。因为我没有测试就看不到问题，你能解释一下到底发生了什么吗？什么好，什么不好？如果您可以发布ajax响应，这将非常有帮助。也许你有一个链接，我可以在那里测试它？克隆draggable的echo语句在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";
$('#".$url['ID'].".link').draggable({
handle: '.link_handle',
helper: function() {
$copy = $(this).clone();
$(this).remove();
return $copy;
},
appendTo: 'body',
scroll: false
});