我正在尝试授权仅在其收容的右侧或底部拖出一个对象,并且不能正确地停止拖动该元素.
我的代码:
<!DOCTYPE html>
<html>
<head>
<style>
#parent { height: 500px; width: 500px; border: 1px black solid; }
#images { height: 100px; width: 100px; background-color:orange; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script>
</head>
<body>
<div id="parent">
<div id="images"></div>
</div>
<script>
$(document).ready(function() {
$("#images").draggable({
containment: $("#parent"),
drag: function(event, ui) {
var helper = ui.helper, pos = ui.position;
if(pos.left + parseInt(helper.outerWidth(), 10) == parseInt($("#parent").css("width"), 10)) {
$("#parent").animate({width: "+=100"});
}
if(pos.top + parseInt(helper.outerHeight(), 10) == parseInt($("#parent").css("height"), 10)) {
$("#parent").animate({height: "+=100"});
}
}
});
}); …有人能告诉我如何最好地实现Jquery draggable和droppable,以便拖动的元素移动到新的位置？
你需要为此实现自己的帮助函数,还是包含在Jquery插件中？
我正在尝试创建一个模板系统,然后将上传的jpg放在模板上.
测试示例:
http://www.silverink.com/TEMP/jqueryTest/
问题是我想在最顶层有一个掩码,但能够点击并拖动下层.目前我不得不点击该区域将其拉到前面然后拖动或将其放在透明的前面.
任何想法或建议最受欢迎!!
我制作了一个可排序,可调整大小,可拖动,带有克隆的portlet,但是当我调整大小时,我遇到了一个bug.
我的剧本:
<script type="text/javascript">
$(function() {
$('#column1').draggable({
helper:'clone',
connectToSortable:'#sort',
handle:'.widget-head',
});
$('#sort').sortable({
handle:'.widget-head',
connectWith: "#sort",
out: function (e,ui) {
$("#sort").children().resizable({ axis: 'x',containment: 'parent',
resize:
function(event, ui)
{
ui.size.width = ui.originalSize.width;
}
});
}
});
});
</script>
$('#drop_area').droppable({
accept: '.draggable',
drop: on_element_drop
});
function on_element_drop(event, ui){
}
<div class="draggable">
<img src="test.png" alt="3">
</div>
我试图找出如何从传递给'on_element_drop'的'ui'参数中获取此可拖动div中图像的'alt'属性.有人知道怎么做吗？
我最接近的是:
ui.helper.context.children[0].attr('alt');
但这不起作用.
我有这种类型的元素:
<div draggable="true" id="item" style="margin:20px;background:red;height:400px;width:400px;">
<a href="#" target="_blank">
<img style="margin:40px;" src="http://www.placekitten.com/100/100" alt="">
</a>
</div>
我希望能够:
现在,我点击它时只拖动图像.
这是一个小提琴:http://jsfiddle.net/M5tBd/
所以这是我正在使用的场景:
我有一个当前表示为ItemsControl/ListView的优先级列表,绑定到可观察的优先级项集合.我想为元素重新排序提供严格视觉上受约束的垂直拖动.
所以,没有拖拽装饰,没有水平移动,只有垂直移动.当列表项移过另一个项的中点时,它应该通过动画"交换位置".我确信这可以通过在容器本身上使用mousedown/mousemove来完成,我确信可以应用渲染转换来执行此操作,但我理想的解决方案将包含两个组件:
该功能可以作为WPF交互行为附加.
该系统将是MVVM友好的,不需要任何重要的代码.
这已经完成了吗？我在哪里可以找到它？如果没有,我怎么能把所有的位放在一起才能做到这一点？
编辑:赏金开了.请通过评论直接向我提问,我会尽快回复.
我有一个可排序和可放置的列表,还有一组单独的可拖动:
ul.sortable
li.droppable
li.droppable
li.droppable
/ul
ul
li.draggable
li.draggable
li.draggable
/ul
我在droppables上应用了悬停类:
$(".droppable").droppable({ hoverClass: "hover" });
悬停应该是用户的视觉提示,告诉他可以将拖动拖放到可放置的拖放上.
问题是当一个droppable也被一个可排序的元素悬停时,也会应用悬停类.在这种情况下,视觉提示是完全错误的.
这是一个说明问题的小提琴(拖动可拖动的可拖动的,重新排序可排序的):http://jsfiddle.net/TWXeH/
如何使悬停类只在可拖放的可拖动时才能工作,而不是在可排序的情况下？
我正在尝试在Firefox selenium IDE中使用dragAndDrop,但它无法正常工作.
我是硒的忠实粉丝但这个问题让我在最后一天疯狂.
我有一个dragAndDrop测试:
dragAndDrop
//div[contains(text(),"Lori F.")]/../../
0,160
但它没有做拖拽.我已经看到它工作了几次但不确定为什么/为什么不现在.似乎有时工作,有时不工作.
单击IDE [find]按钮时,选择器本身可以正常工作.它突出了DIV我想要移动.所以这不是我在selenium中遇到的'通常'问题,实际上不能用正确的xpath选择对象.
它反对的HTML是:
<div class="fc-event-inner fc-event-skin" style="background-color: yellow;">
<div class="fc-event-head fc-event-skin"></div>
<div class="">
<div class="fc-event-title">
Lori F., Marshal H., Chris W., Kenna T.
</div>
</div>
<div class="fc-event-bg"></div>
</div>
当该实际步骤试图运行时,浏览器实际上"闪烁"该对象,表明它能够通过路径OK选择它,但不会发生拖放.
我尝试了使用div的dragAndDropToObject,但这不起作用,因为DIV本身需要一个x,y坐标才能"降落"在正确的位置.
我发现的两个问题[这可能有助于其他人] - 并且被淘汰 - 是1)放大/缩小屏幕上的x,y坐标弄乱了,所以我停止这样做了2)使用元素检查器在Firefox中似乎也阻止它工作.所以我相信我已经将这两种作为潜在原因消除了.
能够测试拖放是非常重要的,因为许多应用程序现在采用各种ajax路由与这种类型的东西,所以能够测试它是关键!
我有一个带有revert的draggable元素:true但是当它成功删除时,帮助器克隆仍然放在我放开的droppable上.我需要克隆在成功的drop上消失,就像在不成功的drop上一样.
$('.frank').draggable({
revert: true,
revertDuration: 0,
helper: 'clone'
})
$( ".offer-2" ).droppable({
accept: '.frank',
drop: function() {
$(this).addClass('offer-2b');
$('.frank, .tp-2').draggable('disable');
}
})
draggable ×10
jquery ×5
jquery-ui ×4
.net ×1
c# ×1
clone ×1
droppable ×1
firefox ×1
hover ×1
html5-video ×1
javascript ×1
resizable ×1
selenium ×1
selenium-ide ×1
wpf ×1