1

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

画像の説明をここに入力

 <!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>

1 件の回答 1

2

box の重なり順序で後ろになるためだと思います。
z-indexを指定してみてください。

例:

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

状況再現スニペット

$(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
            })
        }
    });
});
.dragbox {
    width: 100px;
    height: 50px;
    border: 1px solid;
    background-color: LightGreen;
}

.dropbox {
    width: 300px;
    height:300px;
    border: 1px solid;
    background-color: LightYellow;
}
<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>


z-index指定スニペット

$(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
            })
        }
    });
});
.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;
}
<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>

3
  • なるほどうまくいきました!ただ、「opacity:0,3」とせずに「opacity:1」のままだとこの不具合は起こらないのですが、なぜなのでしょうか?
    – aqua
    Commented 2017年7月10日 14:36
  • @forest 詳しくはわかりませんが、opacityの説明によると「このプロパティを 1 以外の値で用いると、その要素は新しいスタック文脈を作ります。」とありますのでそのせいで動作が変わる(autoの計算されたz-indexが変わる)ものと思います。
    – BLUEPIXY
    Commented 2017年7月10日 14:46
  • なるほど、ありがとうございます!opacityとz-indexは何か影響し合うのですね。
    – aqua
    Commented 2017年7月10日 16:30

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。