Question

根据我的客户说，他们不是拖动ui-draggable元素，而是希望我按鼠标位置移动。

我不知道如何实现这个目标。任何人都可以帮助我吗？需要的是：

当鼠标进入可拖动的父级时，draggable应该可见/隐藏 - 我做了它woks
在鼠标上输入draggable应该位于父{/ li>中mousepostion的中心位置
点击鼠标，我想知道draggable下面的所有网格框是什么。

这是我的尝试：

代码：

;(function($){

    $.fn.colorPallet = function( options ){

        var settings = $.extend({
                pallets:[
                    {
                        title:'Design Group',
                        rows:30,
                        total:150,
                        prefix:'DG',
                        bgPath:'images/'
                    },
                    {
                        title:'Cabinet Combinations',
                        rows:30,
                        total:90,
                        prefix:'CC',
                        bgPath:'images/'
                    }, 

                ],
                marginBottom:30,
                bbw:40,
                bbh:30
        }, options);


        //looping array;-

        if(!settings.pallets.length) {
            console.log('no pallet assigned');
            return;
        }

        //start looping the array;

        var size = settings.pallets.length;
        var hHeight = this.height();
        var pHeight = hHeight / size - settings.marginBottom;
        var that = this;
        var bbw =  settings.bbw;
        var bbh =  settings.bbh;
        var baseHTML = ["<div><h1>","</h1><div></div></div>"];


        return $.each( settings.pallets, function(index, pallet) {

            var html = $(baseHTML[0]+pallet.title+baseHTML[1]);
            var row = 0;
            var col = 0;



            var picker = html.find('div')
                        .mouseenter(function(e) {

                            var dragger = $(this).children(".dragger").show();
                            var x = e.pageX - this.offsetLeft;
                            var y = e.pageY - this.offsetTop;

                            // dragger.css({ //fails for me
                            //  display:'block',
                            //  left:x,
                            //  top:y
                            // })

                            console.log( x, y);
                        })
                        .mouseleave(function(event) {
                            $(this).children(".dragger").hide();
                        })
                        .addClass(pallet.prefix)
                        .append($('<div />',{
                            class:'dragger',
                            width:bbw*3,
                            height:bbh*3
                        }));

            for(var i = 1; i<= pallet.total; i +=1) {

                row += 1;

                if((i % pallet.rows) == 1){
                    row  = 0;
                }

                picker.append($('<div />', 
                    {
                        class:pallet.prefix+'-row-'+row+'p-'+i,
                        css:{
                            left:Math.ceil(row*bbw),
                            top:col*bbh,
                            width:Math.ceil(bbw),
                            height:Math.ceil(bbh),
                            background:'url('+pallet.bgPath+'color'+i+'.jpg)'
                        },
                        text:i
                    })
                );

                if((i % pallet.rows) == 0){
                    col += 1;
                }
            }

            that.append( html );

        });
    }
})(jQuery);

jQuery(document).ready(function($) {

    $('div.colorHolder').colorPallet();

    //setting draggable;

    $(".dragger").draggable({
        containment: "parent",
        grid: [ 40, 30 ],
        distance: 10,
        start:function(){
            console.log("started");
        },
        stop:function(){
            console.log("stopped");
        }
    });

});

现场演示：http://plnkr.co/edit/kMRURYcU5VI9FdIOsFxF?p=preview

`jQuery-UI` - 如何通过鼠标移动而不是拖动来进行拖动？

0 个答案: