如何将jQuery UI可拖动排序的东西与自定义比例代码结合起来? [英] How to combine jquery ui draggable sortable stuff with custom scale code?

查看:122
本文介绍了如何将jQuery UI可拖动排序的东西与自定义比例代码结合起来?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试将可拖动排序的东西与适合我的一些缩放代码结合起来。我只是没有找到一个好的解决方案。



看一看:
http://jsfiddle.net/UXLAE/7/



我已经将比例代码注释掉了,这样您就可以看到应用程序应该可以正常工作。



您有顶部面板,可以将项目从那里拖到底部面板(项目被克隆)。
在底部面板中,您必须能够对项目进行排序。



现在我也希望能够在mouseover上缩放每个项目,无论是在顶部和底部面板。该比例必须是叠加的,并且必须与源项目具有相同的中心。我没有用.animate()或.effect(scale)做这件事情,这会让事情变得更容易,但我设法编写了一些自定义代码,这些代码很好地工作(我注释掉了这部分)。我的问题是,现在我不知道如何将自定义代码与我已有的代码结合起来。他们有点打破对方;)但寻找自己。

会很好,如果你可以发表一些想法或甚至解决方案。



问候

解决方案

你有你的原始元素工作得不错,但我看到你的注释掉的代码打破功能。



查看您的可放置代码:

 接受:#topSquareList li,

您的缩放函数已经创建了一个不属于# topSquareList。我怀疑这是为什么。



当你使用clone()时,这个克隆不是#topSquareList的子元素(只有原始的),这就是为什么你的选择器没有匹配它在你可丢弃的代码。您需要理清您想要删除的内容并制作合适的选择器。



更新:



经过一番讨论后,我想出了这个: http://jsfiddle.net/UXLAE/ 27 /



您的比例代码现在可以与拖放/排序结合使用。你应该比较一下我的原始代码,找出为什么它不起作用 - 有几个原因。它有帮助吗?


i am trying to combine my draggable sortable stuff with some scale code that works well for me. i just failed to find a good solution yet.

take a look at that: http://jsfiddle.net/UXLAE/7/

i've commented out the scale code so that you can see how the app should actually works.

you have the top panel and can drag items from there to the bottom panel (items are cloned). in the bottom panel you must be able to sort the items.

now i also want to be able to scale every item on mouseover, both in the top and the bottom panel. the scale must be an overlay and must have the same center as the source item. i failed to do it with .animate() or .effect("scale") which would have made things a lot easier, but i managed to write some custom code that works pretty well (the part i commented out). my problem is that now i have no idea how to combine the custom code with what i already have. they kinda break each other ;) but look for yourself.

would be nice if you could post some ideas or even a solution.

greetings

解决方案

You have your original element working well enough but I see that your commented out code breaks the functionality.

Have a look at your droppable code:

accept: "#topSquareList li",

Your scaling function has made a clone which is not a part of #topSquareList. I suspect this is why.

When you use clone(), this clone is not a child of #topSquareList (only the original is) which is why your selector does not match it in your droppable code. You need to sort out what you want to drop and make an appropriate selector.

Update:

After some fiddling around, I came up with this: http://jsfiddle.net/UXLAE/27/

Your scale code is now working in conjunction with dragging/dropping/sorting. You should compare what I made to your original code to figure out why it wasn't working - there were more than a few reasons why. Does it help?

这篇关于如何将jQuery UI可拖动排序的东西与自定义比例代码结合起来?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆