首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > .NET > C# >

jquery中sortable的使用有关问题,求解?

2013-09-25 
jquery中sortable的使用问题,求解???页面中想实现图片的拖动js如下:$(document).ready(function () {$(.m

jquery中sortable的使用问题,求解???
页面中想实现图片的拖动
js如下:
    $(document).ready(
    function () {
        $('.moveCss').Sortable(
            {
                accept: 'sortableitem',   //拖拽元素class名
                helperclass: 'sorthelper',     //拖拽时投放位置的样式  
                activeclass: 'sortableactive', //拖拽时悬空时class
                hoverclass: 'sortablehover',  //拖拽时经过时class
                opacity: 0.5,              //拖拽时透明度     
                fx: 200,              //拖拽时回位速度
                revert: true,
                floats: true,
                tolerance: 'hand',
                connectWith: '.sortableitem',
                onchange: changedata        //拖拽状态改变时触发事件
            }
        )
    }
);
        function changedata() {
    }

上段代码中的moveCss样式的div中的sortableitem样式的图片即可拖动,图片通过repeater绑定显示,但是想让一些图片不能拖动,如果不能拖动的图片的样式设置成非sortableitem样式即不能拖动,但是拖动其他图片的时候这样的图片会自动移动补上去,想要的效果是非sortableitem样式的图片既不能拖动,其他图片拖动的时候也不能移动,也就是说查询出来哪个位置就一直在哪个位置,求大虾给解决哈... 。net? jquery? .net?? .net? javascript


[解决办法]
 $('.moveCss').sortable({cancel: ':not(.sortableitem)'});
[解决办法]
这个要自己改造一下jq ui的sortable:


<script>
$.widget("my.sortable", $.extend({ }, $.ui.sortable.prototype, {
    _rearrange: function(event, i, a, hardRefresh) {

        var sortable = ".sortableitem", unmovable = ":not(.sortableitem)";
        var fixed = $(i.item[0]).parent().find(unmovable);
        var orginalPos = fixed.map(function() {
            return $(this).index();
        });

        $.ui.sortable.prototype._rearrange.apply(this, arguments);

        fixed.each(function (n) {
            var el = $(this), index = orginalPos[n];
            if (el.index() < index) {
            el.before(el.nextAll(sortable+':first'));
            }
            else if (el.index() > index) {
            $(el.nextUntil(sortable).last()[0] 
[解决办法]
 el).after(el.prev());
            }
        });
    }
}));
</script>

<script>
$(function () {
$(".moveCss").sortable({items:'.sortableitem'});
});
</script>

热点排行