Change color of draggable on drop AND within droppable zones on hover

问题: 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...

问题:

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>

回答1:

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
});

回答2:

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.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/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>

  • 发表于 2018-07-05 20:18
  • 阅读 ( 655 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除