Question

“错误：语法错误，无法识别的表达式：＃”同时将div标签从右侧拖放到中心页面li标签。的index.html

下面列出的index.html中的操作项

1）li标签重新排列（拖放）。

2）页面的右侧我有div标签，其值为a和b（可拖放（动作 - 仅复制不移动））。

3）我试图在li标签内拖放div（a或b）标签，我需要带有参数拖动标签id的回调函数，drop tag id，我想在放下后更改图像。

4）在li标签内拖动和下垂div标签时我得到了这个错误错误：语法错误，无法识别的表达式：＃，我也没有得到li标签id。

的index.html

<!DOCTYPE html>
<html lang="en">
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="favicon.png" type="image/png" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>lolliandpops-demo</title>

    <script src="http://code.jquery.com/jquery-3.2.1.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"></script>
    <link rel="stylesheet" href="customstyle.css">
    <link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
    <script>
          $( function() {
            $( ".sortable" ).sortable();
            $( ".sortable" ).disableSelection();
          } );
          $( init );
    function init() {
        $('.dragable').draggable({
            cursor: 'move',
            revert: true
        });

        $('.sortable .bgjar').droppable({
            drop: handleDropEvent
        });
    }
    function handleDropEvent( event, ui ) {
        droppedId = $(ui.item);

        var draggableId = ui.draggable.attr("id");
        var droppableId = $(this).attr("id");
        console.log('draggableId:'+draggableId);
        console.log('droppableId:'+droppableId);
        console.log('dropped li Id:'+JSON.stringify(droppedId));
        var draggable = ui.draggable;//Item ID
        console.log('li tag Id :'+event.target.id );
        if(draggable.attr('id') == 1){
            $('#'+event.target.id).html("<img src='6.png' height='50' width='50' title='Jar'>");
        }else if(draggable.attr('id') == 2){
            $('#'+event.target.id).html("<img src='5.png' height='50' width='50' title='Jar'>");
        }
        console.log('Droped Item ID"' + draggable.attr('id') + '"' );
    }
    </script>
</head>
<body>
    <div class="container">
        <div class="col-md-10" id='zone1'>
            <ul class="sortable">
                <li id='bin1' class="ui-state-default bgjar"><img src='jar.png' title='Jar'>1</li>
                <li id='bin2' class="ui-state-default bgjar"><img src='jar.png' title='Jar'>2</li>
                <li id='bin3' class="ui-state-default bgjar"><img src='jar.png' title='Jar'>3</li>
                <li id='bin4' class="ui-state-default bgjar"><img src='jar.png' title='Jar'>4</li>
                <li id='bin5' class="ui-state-default bgjar"><img src='jar.png' title='Jar'>5</li>
                <li id='bin6' class="ui-state-default bgjar"><img src='jar.png' title='Jar'>6</li>
                <li id='bin7'  class="ui-state-default bgjar"><img src='jar.png' title='Jar'>7</li>
            </ul>
        </div>
        <div class="col-md-2">

            <div class='item col-md-12'>
                <div id="1" class="dragable"><a href="" class="list-group-item">a</a></div>
                <div id="2" class="dragable"><a href="" class="list-group-item">b</a></div>
            </div>
        </div>
    </div>
</body>
</html>

customStyle.css中

.col-md-10{ border-color: #faebcc; height:400px;border: 1px solid #ccc;}
.col-md-2{ border-color: #faebcc; height:400px;border: 1px solid #ccc;}
.bin{border: 1px solid #ccc; border-radius: 5px; height: 60px;width: 60px;float:left;}
.ui-state-default{border: 1px solid #ccc; border-radius: 5px; height: 60px;width: 60px;float:left;}
.bgjar{/*  background-image: url("jar.png");background-repeat:no-repeat; background-color: #FFF; */}
.bgjar img{height:45px;width:45px;}

#sortable1 { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable1 li,#sortable2 li,#sortable3 li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em;float:left; font-size: 1.4em; height: 65px;width:47px; }
#sortable1 li span,#sortable2 li span,#sortable3 li span { position: absolute; margin-left: -1.3em; }


#sortable1, #sortable2 {
    border: 1px solid #eee;
    width: 860px;
    min-height: 20px;
    list-style-type: none;
    margin: 0;
    padding: 5px 0 0 0;
    float: left;
    margin-right: 10px;
}
#sortable1 li, #sortable2 li , #sortable3 li {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 60px;
float:left;
}

Jquery UI SyntaxError：期望表达式，得到'。'和错误：语法错误，无法识别的表达式：＃

0 个答案: