相关疑难解决方法(0)

我正在尝试在jQuery中进行验证.

blur通过检查给定是否input为空,它将在事件发生后产生错误.基于此,它将创建具有特定错误的<div class="errdiv">旁边的那个input.我用它.offset来获得那个特定input的位置.errdiv.

CSS:

.inpt {
    width:500px;
    height:50px;
    background:#eee;
    color:#444;
    border:2px solid #ddd;
    padding:5px;
    transition: all ease 1s;
    border-radius:5px;
    outline:none;
}
.inpt:focus {
    background:#fff;
    color:#222;
    border:2px solid #000;
}
.err {
    background:pink;
    border:2px solid #f00;
    color:#a00;
}
.errdiv {
    position:absolute;
    top:0px;
    left:0px;
    height:30px;
    display:inline-block;
    padding:5px;
    border-radius:5px;
    background:#a00;
    border:1px solid #a44;
    color:#fff;
    text-align:center;    
    font-weight:bolder;
    visibility:visible;
    opacity:0;
}

JS:

$(document).ready(function(){
    $(".inpt").blur(function(){
        // Check Input for validation.
        $(".errdiv").remove(); //Remove Any …

我试图将拖放元素拖放到可放置的区域.假设我有多个相同的可放置区域,class我已经drop为此编写了一个事件处理程序class.

如果我使用可缩放区域缩小-webkit-transform:scale(0.3,0.3);,则drop事件很奇怪.在可拖动元素连接到其中一个可投放区域之前,下降发生在多个可放置区域上.

我认为这个问题是因为使用了scale但我对如何解决它没有任何想法.谷歌搜索也没有帮助.

我为DEMO设置了一个小提琴.

这是我的代码

剧本

var click = {
    x: 0,
    y: 0
}; // used for recording mouse cords

$('document').ready(function(event){
    for(var i = 0 ; i <= 72 ; i++)
    {
        $('<div></div>').attr({'class':'drop_zone','id':'drop_'+i}).appendTo($('.main_container'));
    }
    $('.drop_zone').each(function(index,element){
        $(this).attr('id','drop_'+index);
    })
    $('.draggable').draggable();
    $('.draggable').on('dragstart',function(event,ui){
        $('#droppable_area_ids').html('');
        click.x = event.clientX;
        click.y = event.clientY;
    })
    $('.draggable').on('drag',function(event,ui){
        var zoom = 0.3;
        var original = ui.originalPosition;

        ui.position = {
            left: (event.clientX - click.x + original.left) / zoom, …