36253


下の箱に入った時に半透明にしています。  
すると、ドラッグができなくなります。

[![画像の説明をここに入力](https://i.stack.imgur.com/CEikg.png)](https://i.stack.imgur.com/CEikg.png)

[code]

     <!DOCTYPE html>
            <html>
            <head>
            <meta charset="UTF-8" />
            <title>jQuery UI</title>
            <link rel="stylesheet"
              href="http://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.min.css" />
            <link rel="stylesheet" href="site.css" />
            </head>
            <body>
            <div id="main">
              <div id="dragbox1" class="dragbox">きゅうり</div>
              <div id="dragbox2" class="dragbox">きゃべつ</div>
              <div id="dragbox3" class="dragbox">レタス</div>
              <hr />
              <div class="dropbox"></div>
            </div>
            <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
            <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
            <script>
            $(function() {
              $('.dragbox').draggable();
              $('.dropbox').droppable({
                drop: function(e, ui) {
                //   $(this).html($(this).html() +
                //     ui.draggable.text() + 'が入りました。<br />');
                },
                over: function(e,ui) {
                    $(this).css({
                        opacity:0.3
                    })
                },
                out:function(e,ui) {
                    $(this).css({
                        opacity:1.0
                    })
                }
              });
            });
            </script>
            </body>
            </html>
    
[/code]


CC BY-SA 3.0
2017-07-10T11:40:22.103
36247
2019-12-13T20:23:42.927
2019-12-13T20:23:42.927
32986
12297
question
javascript jquery jquery-ui
半透明になったboxがドラッグできなくなる。


box の重なり順序で後ろになるためだと思います。  
[z-index](https://developer.mozilla.org/ja/docs/Web/CSS/z-index)を指定してみてください。

例：

[code]

    <style>
    .dragbox {
      /* 他の指定 */
      z-index:1; /* 数値が大きいほど「前（上）」になる */
    }
    .dropbox {
      /* 他の指定 */
      z-index:0;
    }
    </style>
    
[/code]

* * *

状況再現スニペット  

[code]

    $(function() {
        $('.dragbox').draggable();
        $('.dropbox').droppable({
            drop: function(e, ui) {
            //   $(this).html($(this).html() +
            //     ui.draggable.text() + 'が入りました。<br />');
            },
            over: function(e,ui) {
                $(this).css({
                    opacity:0.3
                })
            },
            out:function(e,ui) {
                $(this).css({
                    opacity:1.0
                })
            }
        });
    });
[/code]

[code]

    .dragbox {
        width: 100px;
        height: 50px;
        border: 1px solid;
        background-color: LightGreen;
    }
    
    .dropbox {
        width: 300px;
        height:300px;
        border: 1px solid;
        background-color: LightYellow;
    }
[/code]

[code]

    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <div id="main">
      <div id="dragbox1" class="dragbox">きゅうり</div>
      <div id="dragbox2" class="dragbox">きゃべつ</div>
      <div id="dragbox3" class="dragbox">レタス</div>
      <hr />
      <div class="dropbox"></div>
    </div>
[/code]

* * *

z-index指定スニペット

[code]

    $(function() {
        $('.dragbox').draggable();
        $('.dropbox').droppable({
            drop: function(e, ui) {
            },
            over: function(e,ui) {
                $(this).css({
                    opacity:0.3
                })
            },
            out:function(e,ui) {
                $(this).css({
                    opacity:1.0
                })
            }
        });
    });
[/code]

[code]

    .dragbox {
        width: 100px;
        height: 50px;
        border: 1px solid;
        background-color: LightGreen;
        z-index: 1;
    }
    
    .dropbox {
        width: 300px;
        height:300px;
        border: 1px solid;
        background-color: LightYellow;
        z-index: 0;
    }
[/code]

[code]

    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <div id="main">
      <div id="dragbox1" class="dragbox">きゅうり</div>
      <div id="dragbox2" class="dragbox">きゃべつ</div>
      <div id="dragbox3" class="dragbox">レタス</div>
      <hr />
      <div class="dropbox"></div>
    </div>
[/code]


CC BY-SA 3.0
2017-07-10T14:23:53.350
36253
2017-07-11T01:52:54.567
2017-07-11T01:52:54.567
5044
5044
36247
answer