javascript - Change color of draggable on drop AND within droppable zones on hover - Stack Overflow

IT技术

更新时间：2025-04-184

admin管理员组
文章数量:1406063

I am dragging the "drag" to "container1" and "container2". When it is dropped, "drag" either turns dark purple if in "container1" or dark orange if in "container2".

This is what I have, this changes "drag" when it is hovering over the droppable containers, but it does not change the color when it is dropped. Any help is appreciated! Thank you!

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    .container {
      width: 50px;
      height: 50px;
      background: #e9559a;
      padding: 13px;
      margin: 0 5px 5px 0;
    }

    .bdrag {
      height: 100px;
      width: 100px;
      background: grey;
      padding: 5px;
    }

    .dark-purple {
      background: #8b0000;
    }

    .dark-orange {
      background: #000080
    }

    .drop-green {
      background: #38a53a;
    }

    .drop-yellow {
      background: #fbff23;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="shape-container">
          <div id="origin-container" class="container">
            <div id="dragbox" class="bdrag text-dark">
              <p>Draggable Box</p>
            </div>
          </div>
          <div id="dcontainer2" class="container">
            <p>Can drop in here #1</p>
          </div>
          <div id="dcontainer1" class="container">
            <p>Can drop in here #2</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script>
    $(document).ready(function() {
      $(function() {
        $("#drag-container").draggable({
          revert: function(event, ui) {
            $(this).data("uiDraggable").originalPosition = {
              top: 0,
              left: 0
            };
            return !event;
          }
        });

        $("#dcontainer1").droppable({
          accept: '#dragbox'
        });

        $("#dcontainer2").droppable({
          accept: '#dragbox'
        });

        $( "#dcontainer1" ).droppable({ 
           over: function() { 
             $("#dragbox").addClass("drop-yellow")
             .removeClass("drop-green"); }, 
           drop: function() { 
             $("#dragbox").addClass("dark-orange")
             .removeClass("dark-purple").find("p"); } 
        });
        $( "#dcontainer1" ).droppable({ 
           over: function() { 
             $("#dragbox").addClass("drop-green")
             .removeClass("drop-yellow"); }, 
           drop: function() { 
             $("#dragbox").addClass("dark-purple")
             .removeClass("dark-orange").find("p"); } 
        }); 
      });
    });
  </script>
</body>
</html>

I am dragging the "drag" to "container1" and "container2". When it is dropped, "drag" either turns dark purple if in "container1" or dark orange if in "container2".

This is what I have, this changes "drag" when it is hovering over the droppable containers, but it does not change the color when it is dropped. Any help is appreciated! Thank you!

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    .container {
      width: 50px;
      height: 50px;
      background: #e9559a;
      padding: 13px;
      margin: 0 5px 5px 0;
    }

    .bdrag {
      height: 100px;
      width: 100px;
      background: grey;
      padding: 5px;
    }

    .dark-purple {
      background: #8b0000;
    }

    .dark-orange {
      background: #000080
    }

    .drop-green {
      background: #38a53a;
    }

    .drop-yellow {
      background: #fbff23;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="shape-container">
          <div id="origin-container" class="container">
            <div id="dragbox" class="bdrag text-dark">
              <p>Draggable Box</p>
            </div>
          </div>
          <div id="dcontainer2" class="container">
            <p>Can drop in here #1</p>
          </div>
          <div id="dcontainer1" class="container">
            <p>Can drop in here #2</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script>
    $(document).ready(function() {
      $(function() {
        $("#drag-container").draggable({
          revert: function(event, ui) {
            $(this).data("uiDraggable").originalPosition = {
              top: 0,
              left: 0
            };
            return !event;
          }
        });

        $("#dcontainer1").droppable({
          accept: '#dragbox'
        });

        $("#dcontainer2").droppable({
          accept: '#dragbox'
        });

        $( "#dcontainer1" ).droppable({ 
           over: function() { 
             $("#dragbox").addClass("drop-yellow")
             .removeClass("drop-green"); }, 
           drop: function() { 
             $("#dragbox").addClass("dark-orange")
             .removeClass("dark-purple").find("p"); } 
        });
        $( "#dcontainer1" ).droppable({ 
           over: function() { 
             $("#dragbox").addClass("drop-green")
             .removeClass("drop-yellow"); }, 
           drop: function() { 
             $("#dragbox").addClass("dark-purple")
             .removeClass("dark-orange").find("p"); } 
        }); 
      });
    });
  </script>
</body>
</html>

Share Improve this question edited Jul 3, 2018 at 22:29 asked Jul 2, 2018 at 8:30 fibonaccilinguine 1871 gold badge2 silver badges16 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 5

As I don't have your original HTML code, I've made a simple example (just click run code button)...

it uses the droppable events over and out to figure out and add classes to the helper so one knows what droppable area is over... the rest is just CSS for coloring.

The idea is, on over we do know everything, so I append the actually droppable id to the helper as a class, so it's easy to modify the styles through CSS.

$(function() {
  $(".draggable").draggable({
      helper: "clone",
      revert: "invalid"
  });
  $( ".droppable" ).droppable({
      drop: function( event, ui ) {
        // dropped
        //console.log('drop');
        $(this).addClass('dropped');
      },
      over: function( event, ui ) {
        // over droppable        
        //console.log('over');
        
        ui.helper
          .addClass("ui-over")
          .addClass($(this).attr('id'));
      },
      out: function( event, ui ) {
        // not over droppable
        //console.log('out');
        
        // reset
        ui.helper
          .removeClass("ui-over")
          .removeClass("container1")
          .removeClass("container2");
      }
    });
});

.content {
  width: 650px;
  text-align: center;
  margin: 30px auto;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  justify-content: space-around;
}


#container1 {
  float: left;
}
#container2 {
  float: right;
}

/* change color if over it */
#container1.ui-droppable-hover {
  background: #38a53a;
}
#container2.ui-droppable-hover {
  background: #fbff23;
}
/* change color if being dragged */
.ui-draggable-dragging {
  background: #8b0000 !important;
}
/* change color depend on droppable area */
.ui-over.container1 {
  background: #ff0 !important;
}
.ui-over.container2 {
  background: #0ff !important;
}
#container1.dropped {
  border: 5px dashed black !important;
}
#container2.dropped {
  border: 5px dashed blue !important;
}


/* your css */
.container {
  width: 150px;
  height: 100px;
  background: #e9559a;
  padding: 13px;
  margin: 0 5px 5px 0;
  border: 5px dashed transparent;
}

.bdrag {
  height: 50px;
  width: 50px;
  background: grey;
  padding: 5px;
}

.dark-purple {
  background: #8b0000;
}

.dark-orange {
  background: #000080
}

.drop-green {
  background: #38a53a;
}

.drop-yellow {
  background: #fbff23;
}

<link href="https://code.jquery./ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery./jquery-3.1.0.js"></script>
<script src="https://code.jquery./ui/1.12.1/jquery-ui.js"></script>

  <div class="content">
    
    <div id="container1" class="container droppable">[ C 1 ]</div>
    <div id="container2" class="container droppable">[ C 2 ]</div>

    <ul>
      <li class="draggable bdrag">[ A ]</li>
      <li class="draggable bdrag">[ B ]</li>
      <li class="draggable bdrag">[ C ]</li>
      <li class="draggable bdrag">[ D ]</li>
    </ul>
    
  </div>

Sounds like instead of hoverClass you want the functionality of the over and out events. For example:

$("#dcontainer1").droppable({
    over: function() { $("#dragbox").addClass("drop-yellow"); /* remove other classes if needed */ },
    out: function() { $("#dragbox").removeClass("drop-yellow"); }
    // ... other options
});

本文标签： javascriptChange color of draggable on drop AND within droppable zones on hoverStack Overflow

版权声明：本文标题：javascript - Change color of draggable on drop AND within droppable zones on hover - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.betaflare.com/web/1744958960a2634533.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

编程频道|软件玩家 - 软件改变生活！

javascript - Change color of draggable on drop AND within droppable zones on hover - Stack Overflow

2 Answers 2

更多相关文章