标签: draggable
记住页面刷新之间的jQuery可拖动工具调色板位置
我有一个工具调色板,当管理员用户登录到站点时显示.可以拖动调色板(通过jQueryUI.draggable),我希望它能记住页面/刷新之间的位置......是否有标准的方法来执行此操作,或者我应该使用的插件,或者我是否需要滚动我自己(通过饼干或其他东西)？
推荐指数
解决办法
查看次数
jQuery UI,可拖动的子div大于父级
我查看了几篇文章,并尝试了所有提出的方法,但尚未发现任何解决方案.
我试图创建一个可拖动的地图,但是当它自己的边缘遇到父边缘时会停止.孩子比父母大,所以我尝试了所有不同类型的方法来解决这个问题,但还没有找到解决方案.
下面的示例显示了一个示例,其中黑色边框内不应有任何空白区域.我尝试过几种不同口味的遏制,但还没有想出它的数学.
示例:http://jsfiddle.net/LQtCY/3/
谢谢
推荐指数
解决办法
查看次数
jquery droppable - >避免多次丢弃同一个对象
我有一个具有不同draggable -elements的容器,并且有一些"target"div的列表,用户可以删除可拖动的元素.
示例:想象一下,您有一个"标签"列表(House,Computer,Car,..)和一些文档列表作为目标(所有文档都是div的一部分<div id="doclist">).所以目标是使用拖放操作将"标签"分配给文档.顺便说一句,每个tag-Div都有一个唯一的id(<div id="e34a568b2">)
使"标签"可拖动的代码:
$('#taglist').find('div').draggable(
{helper: "clone"});
使文件"可放置"的代码:
$('#doclist').droppable({
drop: function( event, ui )
{tag=ui.draggable;
tag.clone().appendTo( this );
} });
到目前为止,这很有效.问题是,现在您可以将相同的标签多次分配给相同的文档.示例:文档1可以获得标记"House"5次,标记"计算机"3次.
我的目标是,每个文档只能有一次标记.
我不知道,如何解决这个问题.现在,我有办法:
1.)通过走DOM $(this)来扩展"drop"函数.find ...看看,如果有一个具有相同id的元素 - 在这种情况下,不要再次克隆和追加.可能这需要很多性能.
2.)使用可拖动小部件的"接受"功能.但我不知道如何在这种情况下使用它.
谢谢你的帮助.
推荐指数
解决办法
查看次数
Jquery draggables：删除一个元素会改变其他放置元素的位置
当放置/放置元素（通过从一个 DIV 拖到另一个 DIV）然后在放置的 DIV 中移除一个元素时，其中一些正在改变位置。
这是一个测试场景：http : //jsfiddle.net/TcYHW/8/
和主要代码：
<div id="dropwin"></div>
<div id="dragables">
<div id="d1" class="d"></div>
<div id="d2" class="d"></div>
<div id="d3" class="d"></div>
<div id="d4" class="d"></div>
</div>
$(".d").draggable({
containment: '#dropwin',
stack: '#dragables div',
cursor: 'move',
});
我怎样才能避免这种情况？
我发现，元素被放置在相对于起始位置的位置。即使有一些被移除，我怎样才能让它们粘在掉落的位置？
我发现了两个几乎相似的问题，但没有令人满意的答案：
推荐指数
解决办法
查看次数
拖放图片上传无法在服务器上运行
我正在尝试实现拖放图像上传.我在网上发现了一个相当简单的脚本,并且适合我的使用.在我的本地安装上,文件上传完全正常,但不在服务器上.在我的调试尝试中,$ _SERVER ['HTTP_X_FILENAME']甚至没有被php设置.
我尝试了以下操作: - 确保上传文件夹设置为755 - 更改php临时上载路径并增加允许的最大文件大小
没有任何类型的php或js错误发生.因为我有骰子(print_r($ _ SERVER)); 在php中,我使用chrome检查器获取$ _SERVER转储,它不包含HTTP_X_FILENAME索引.
我的php是:
<?php
$fn = (isset($_SERVER['HTTP_X_FILENAME']) ? $_SERVER['HTTP_X_FILENAME'] : false);
if ($fn) {
// AJAX call
file_put_contents(
'../usr/photos/' . $fn,
file_get_contents('php://input')
);
echo "$fn uploaded";
exit();
}
else {
// form submit
if(!$_FILES['fileselect']) die(print_r($_SERVER));
else $files = $_FILES['fileselect'];
foreach ($files['error'] as $id => $err) {
if ($err == UPLOAD_ERR_OK) {
$fn = $files['name'][$id];
move_uploaded_file(
$files['tmp_name'][$id],
'../usr/photos/' . $fn
);
echo "<p>File $fn uploaded.</p>";
}
}
}
js如下:
//拖放照片上传(function(){ …
推荐指数
解决办法
查看次数
防止地图重复并在世界范围内保持拖动
有没有办法让传单不重复世界地图并使地图在拖动时保持在世界范围内？并在世界大小达到窗口大小时禁用缩小
推荐指数
解决办法
查看次数
SVG 元素的生成和拖动 - 方法
我正在学习 Javascript/SVG 组合（动画和制作交互式 SVG）。
我想创建一个代码片段，其中可以将菜单元素（“库存”）拖到主屏幕（“画布”）上，而原始元素将保留在其位置（就像将其副本从原始元素中移出一样）元素）。
在这里，我尽我所能制作了代码片段：http : //codepen.io/cmer41k/pen/f2b5eea274cdde29b0b2dc8a2424a645
所以我设法做了一些事情，但它有问题：
我可以处理 1 个副本并使其可拖动，但是我不知道如何处理所有这些生成元素的 ID，这会导致拖动问题
我不明白如何让它无限期地工作（这样它就可以产生任何数量的可拖动到画布的圆圈）
画布中的可拖动元素经常重叠，我无法以它们不重叠的方式附加侦听器，因此我拖动的元素上的侦听器将“通过”那里的任何其他元素传播；（
问题基本上是 - 有人可以建议我应该放入这个片段的逻辑，这样它就不会那么麻烦。我很确定我在这里遗漏了一些东西；（（例如，它不应该那么难，不是吗？）
HTML：
<body>
<svg id="svg"
height="800"
width="480"
viewbox="0 0 480 800"
preserveAspectRatio="xMinYMin meet"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<rect id="canvasBackground" width="480" height="480" x="0" y="0"/>
<rect id="inventoryBackground" width="480" height="100" x="0" y="480"/>
<g id="inventory">
<path id="curve4" class="inventory" d="M60,530 A35,35 0 1,1 60,531" />
<path id="curve3" class="inventory" d="M150,530 A35,35 0 1,1 150,531" />
<path id="curve2" class="inventory" d="M240,530 A35,35 0 1,1 240,531" />
<path id="curve1" class="inventory" d="M330,530 A35,35 …推荐指数
解决办法
查看次数
Shopify 可拖动库的简单“hello world”示例
使用 Shopify 的Draggable库寻找一组可排序元素的简单工作示例。捆绑的示例对我来说不够简单。
推荐指数
解决办法
查看次数
如何在静态函数中调整大小/更改时将 gridster-item 保存在数据库中？
在我的仪表板上执行一些调整大小/拖动操作后，我想在我的 MongoDB 数据库中保存我更改的小部件的更新大小和位置。幸运的是，gridster 库可以对可拖动和调整大小的事件做出反应。但不幸的是它们是静态的，所以当我想通过使用我的数据库服务保存新值时，它不起作用，因为它不能使用它，因为它不是静态的。
我使用了 Angular 6 和 angular-gridster2 6.0.10。
有谁知道如何使用调整大小/拖动事件来保存我的数据？
这是代码（不可运行，因为我减少了很多）：
export class SheetContentComponent implements OnInit {
constructor(protected databaseService: DatabaseService,
private dataService: DataService,
protected projectService: ProjectService) {
}
protected widgetType = WidgetType;
protected project: Project;
protected currentDashboardId: string;
protected user: User;
protected currentSheetId: string;
protected widgetPosition: GridsterItem;
protected currentWidgetId: string;
protected dashboard: Array<GridsterItem>;
ngOnInit(): void {
this.options = {
gridType: GridType.Fit,
displayGrid: DisplayGrid.Always,
compactType: CompactType.None,
margin: 10,
outerMargin: true,
minCols: 50,
maxCols: 200,
minRows: 50,
maxRows: 100,
pushItems: true, …推荐指数
解决办法
查看次数
React-Native 应用程序的可折叠和可拖动部分列表
我需要实现可折叠的 sectionList 以及可拖动的可折叠标题。问题是我必须在使用 sectionList 作为列表视图的现有代码上实现可折叠和可拖动功能，如果有人可以帮助我提供任何代码或建议，那将会很棒，因为我是 React-Native 的新手并且发现它非常现阶段困难
mobile draggable collapse react-native react-native-sectionlist
推荐指数
解决办法
查看次数