Javascript Jquery UI语法错误：应为表达式，Get''；和错误：语法错误，无法识别的表达式：#_Javascript_Jquery_Html_Jquery Ui

Javascript Jquery UI语法错误：应为表达式，Get''；和错误：语法错误，无法识别的表达式：#

javascript jquery html jquery-ui

Javascript Jquery UI语法错误：应为表达式，Get''；和错误：语法错误，无法识别的表达式：#,javascript,jquery,html,jquery-ui,Javascript,Jquery,Html,Jquery Ui,“错误：语法错误，无法识别的表达式：#”，同时将div标记从右侧拖放到中间页li标记。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 c

“错误：语法错误，无法识别的表达式：#”，同时将div标记从右侧拖放到中间页li标记。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>

JSIDLE链接：

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

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

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

3）我试图拖放div（a或b）标签在li标签中，在那里我需要参数drag tag 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>

为什么要在jQuery对象中放置函数-

$（init）？只需从document.ready事件处理程序中直接调用函数：init（）
k我将更新所提到的更改，谢谢。我需要以下几点的帮助1）我想实现李标签必须重新安排（拖放）。2） 将一个div标记从右侧拖放到li标记，并使用（拖放id）调用回调函数@RoryMcCrossan当然那只是一个简写的document.ready
handler？是的-尽管如果你已经有了document.ready handler，这是非常多余的。@mohanraj这是一个语法错误-使用语法突出显示编辑器，错误所在的位置应该很明显。