Question

我想设计一个拖放属性来填充给定选项的空白，例如： -

问：他是 _ _男孩。

选项：
一个。好的湾坏。

在此用户中将能够选择选项并删除空白。选项不应该在列表中，而应该在div中。

  <script>
            $(function() {
                $("#sortable1, #sortable2").sortable({
                    connectWith: ".connectedSortable"
                }).disableSelection();
            });
        </script>
        </head>

        <body>
            <div id="sortable1" class="connectedSortable">
                This is a  <div >_______</div> story
                He is a <div>_______</div> boy.
                Food is <div >________</div> here.


            </div>
            <b>option</b>
            <div id="sortable2" class="connectedSortable">
                <div >good</div>
                <div >bad</div>
                <div >lousy</div>
                <div >nice</div>
                <div >awesome</div>
            </div>

Answer 1

最好使用jQueryUI进行拖放功能，而不是编写自己的插件。这是您的问题的解决方案。

http://jsfiddle.net/ayniam/4aMhr/

 <html> 
<head>

  <title>jQuery UI Droppable - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

  <script>
  $(function() {
    $( "#draggable1" ).draggable();
    $( "#droppable" ).droppable();
    $( "#draggable2" ).draggable();

  });   

</script>
</head>

    <body>
     <div>He is a <div id="droppable" style="display:inline">  __________________  </div></div>
    <div id="draggable1">
     <p>boy</p>
     </div>
    <div id="draggable2">
       <p>girl</p>   
    </div>    
    </body>
</html>

但是，我使用了各个id选择器的函数表达式，如果你想使用多个id选择器，看看这个

jQuery Multiple ID selectors

希望它能解决你的问题。

使用jquery或java脚本中的拖放来填充空白

1 个答案: