文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使两个元素在拖放完成后褪色？

问如何使两个元素在拖放完成后褪色？
EN

Stack Overflow用户

提问于 2018-08-17 18:57:56

回答 1查看 50关注 0票数 1

供参考- 科德芬

我正在处理一个拖放应用程序。在滴滴完成后，我设置了可拖式从红色到绿色，然后它就消失了。

可下垂的，可拖的后面也将需要淡出。我尝试过几种不同的方法来将淡色技术应用于可拖的和可下垂的，但我就是无法做到。

// Javascript
$(init);

function init() {

  $('#term-1').data( 'number', 1 ).attr( 'id', 'card'+1 ).draggable( {
    containment: '#content',
    stack: '#cardTerms div',
    cursor: 'pointer',
    revert: true
  } );

  $('#term-2').data( 'number', 2 ).attr( 'id', 'card'+2 ).draggable( {
    containment: '#content',
    stack: '#cardTerms div',
    cursor: 'pointer',
    revert: true
  } );

  $('#term-3').data( 'number', 3 ).attr( 'id', 'card'+3 ).draggable( {
    containment: '#content',
    stack: '#cardTerms div',
    cursor: 'pointer',
    revert: true
  } );

  $('#term-4').data( 'number', 4 ).attr( 'id', 'card'+4 ).draggable( {
    containment: '#content',
    stack: '#cardTerms div',
    cursor: 'pointer',
    revert: true
  } );

  $('#term-5').data( 'number', 5 ).attr( 'id', 'card'+5 ).draggable( {
    containment: '#content',
    stack: '#cardTerms div',
    cursor: 'pointer',
    revert: true
  } );

  $('#term-6').data( 'number', 6 ).attr( 'id', 'card'+6 ).draggable( {
    containment: '#content',
    stack: '#cardTerms div',
    cursor: 'pointer',
    revert: true
  } );


  $('#def-1').data( 'number', 1 ).droppable( {
    accept: '#cardTerms div',
    hoverClass: 'hovered',
    drop: handleCardDrop
  } );

  $('#def-2').data( 'number', 2 ).droppable( {
    accept: '#cardTerms div',
    hoverClass: 'hovered',
    drop: handleCardDrop
  } );

  $('#def-3').data( 'number', 3 ).droppable( {
    accept: '#cardTerms div',
    hoverClass: 'hovered',
    drop: handleCardDrop
  } );

  $('#def-4').data( 'number', 4 ).droppable( {
    accept: '#cardTerms div',
    hoverClass: 'hovered',
    drop: handleCardDrop
  } );

  $('#def-5').data( 'number', 5 ).droppable( {
    accept: '#cardTerms div',
    hoverClass: 'hovered',
    drop: handleCardDrop
  } );

  $('#def-6').data( 'number', 6 ).droppable( {
    accept: '#cardTerms div',
    hoverClass: 'hovered',
    drop: handleCardDrop
  } );

}

var totalCards = $('#cardTerms').children().length;
var totalMatches = 0;

function handleCardDrop( event, ui ) {
  var slotNumber = $(this).data( 'number' );
  var cardNumber = ui.draggable.data( 'number' );

  if ( slotNumber == cardNumber ) {
    totalMatches++;
    ui.draggable.addClass( 'correct' );
    ui.draggable.addClass( 'fade' );    
    ui.draggable.draggable( 'disable' );
    $(this).droppable( 'disable' );
    ui.draggable.draggable( 'option', 'revert', false );
  }

  if (totalMatches == totalCards) {
    $('#matchModal').modal('show');
  }
}

#content {
  text-align: center;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

#cardTerms {
  margin: 10px auto 0 auto;
}

#cardDefs {
  margin: 0 auto;
}

#cardDefs {
  width: 100%;
  height: auto;
  padding: 15px;
}

#cardTerms {
  width: 100%;
  height: auto;
  padding: 15px;
}

#cardTerms div, #cardDefs div {
  float: left;
  width: auto;
  height: auto;
  padding: 10px;
  /*border: 1px solid #333;*/
  background-color: #ff0000;
  color: #ffffff;
  margin: .5rem;
  text-align: left;
}
#cardTerms div:first-child, #cardDefs div:first-child {

}
#cardTerms div.hovered {
  background: #aaa;
}
#cardTerms div {
  border: 1px dashed #fff;
}
#cardDefs div {
  background: #fff;
  /*border: 1px solid #005575;*/
  color: #000;
  font-size: 1em;
  line-height: 1.3;
}
#cardDefs div.ui-draggable-dragging {
  -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
}

#card1.correct {
  background: #5fcf80;
  color: #fff;
}

#card2.correct {
  background: #5fcf80;
  color: #fff;
}

#card3.correct {
  background: #5fcf80;
  color: #fff;
}

#card4.correct {
  background: #5fcf80;
  color: #fff;
}

#card5.correct {
  background: #5fcf80;
  color: #fff;
}

#card6.correct {
  background: #5fcf80;
  color: #fff;
}

.fade {
  color: #FFFFFF;
  text-align: center;

  -webkit-transition: opacity 2s ease-in-out;
  -moz-transition: opacity 2s ease-in-out;
  -ms-transition: opacity 2s ease-in-out;
  -o-transition: opacity 2s ease-in-out;
  opacity: 1;  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <!-- HTML here -->
      <div id="content" class="content">
        <div class="row">
          <div class="col-sm-12 col-md-4 col-lg-6">
            <div id="cardTerms">
              <div id="term-1">class</div>
            </div>            
          </div>
          <div class="col-sm-12 col-md-8 col-lg-6">
            <div id="cardDefs">
              <div class="card">
                <div class="card-body" id="def-1">
                  HTML elements can have one or more classes, separated by spaces. You can style elements using CSS by selecting them with their classes.                  
                </div>
              </div>
            </div>            
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

javascript

jquery

html

css

jquery-ui

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-08-17 19:08:52

如果您也将fade class添加到其中，拖放后面的可下拉式也会逐渐淡出。

$(this).addClass( 'fade' );

// Javascript
$(init);

function init() {

  $('#term-1').data( 'number', 1 ).attr( 'id', 'card'+1 ).draggable( {
    containment: '#content',
    stack: '#cardTerms div',
    cursor: 'pointer',
    revert: true
  } );

  $('#term-2').data( 'number', 2 ).attr( 'id', 'card'+2 ).draggable( {
    containment: '#content',
    stack: '#cardTerms div',
    cursor: 'pointer',
    revert: true
  } );

  $('#term-3').data( 'number', 3 ).attr( 'id', 'card'+3 ).draggable( {
    containment: '#content',
    stack: '#cardTerms div',
    cursor: 'pointer',
    revert: true
  } );

  $('#term-4').data( 'number', 4 ).attr( 'id', 'card'+4 ).draggable( {
    containment: '#content',
    stack: '#cardTerms div',
    cursor: 'pointer',
    revert: true
  } );

  $('#term-5').data( 'number', 5 ).attr( 'id', 'card'+5 ).draggable( {
    containment: '#content',
    stack: '#cardTerms div',
    cursor: 'pointer',
    revert: true
  } );

  $('#term-6').data( 'number', 6 ).attr( 'id', 'card'+6 ).draggable( {
    containment: '#content',
    stack: '#cardTerms div',
    cursor: 'pointer',
    revert: true
  } );


  $('#def-1').data( 'number', 1 ).droppable( {
    accept: '#cardTerms div',
    hoverClass: 'hovered',
    drop: handleCardDrop
  } );

  $('#def-2').data( 'number', 2 ).droppable( {
    accept: '#cardTerms div',
    hoverClass: 'hovered',
    drop: handleCardDrop
  } );

  $('#def-3').data( 'number', 3 ).droppable( {
    accept: '#cardTerms div',
    hoverClass: 'hovered',
    drop: handleCardDrop
  } );

  $('#def-4').data( 'number', 4 ).droppable( {
    accept: '#cardTerms div',
    hoverClass: 'hovered',
    drop: handleCardDrop
  } );

  $('#def-5').data( 'number', 5 ).droppable( {
    accept: '#cardTerms div',
    hoverClass: 'hovered',
    drop: handleCardDrop
  } );

  $('#def-6').data( 'number', 6 ).droppable( {
    accept: '#cardTerms div',
    hoverClass: 'hovered',
    drop: handleCardDrop
  } );

}

var totalCards = $('#cardTerms').children().length;
var totalMatches = 0;

function handleCardDrop( event, ui ) {
  var slotNumber = $(this).data( 'number' );
  var cardNumber = ui.draggable.data( 'number' );
  //console.log($(this));
  if ( slotNumber == cardNumber ) {
    totalMatches++;
    ui.draggable.addClass( 'correct' );
    ui.draggable.addClass( 'fade' );    
    ui.draggable.draggable( 'disable' );
    $(this).droppable( 'disable' );
    $(this).addClass( 'fade' );    
    ui.draggable.draggable( 'option', 'revert', false );
  }

  if (totalMatches == totalCards) {
    $('#matchModal').modal('show');
  }
}

#content {
  text-align: center;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

#cardTerms {
  margin: 10px auto 0 auto;
}

#cardDefs {
  margin: 0 auto;
}

#cardDefs {
  width: 100%;
  height: auto;
  padding: 15px;
}

#cardTerms {
  width: 100%;
  height: auto;
  padding: 15px;
}

#cardTerms div, #cardDefs div {
  float: left;
  width: auto;
  height: auto;
  padding: 10px;
  /*border: 1px solid #333;*/
  background-color: #ff0000;
  color: #ffffff;
  margin: .5rem;
  text-align: left;
}
#cardTerms div:first-child, #cardDefs div:first-child {

}
#cardTerms div.hovered {
  background: #aaa;
}
#cardTerms div {
  border: 1px dashed #fff;
}
#cardDefs div {
  background: #fff;
  /*border: 1px solid #005575;*/
  color: #000;
  font-size: 1em;
  line-height: 1.3;
}
#cardDefs div.ui-draggable-dragging {
  -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
}

#card1.correct {
  background: #5fcf80;
  color: #fff;
}

#card2.correct {
  background: #5fcf80;
  color: #fff;
}

#card3.correct {
  background: #5fcf80;
  color: #fff;
}

#card4.correct {
  background: #5fcf80;
  color: #fff;
}

#card5.correct {
  background: #5fcf80;
  color: #fff;
}

#card6.correct {
  background: #5fcf80;
  color: #fff;
}

.fade {
  color: #FFFFFF;
  text-align: center;

  -webkit-transition: opacity 2s ease-in-out;
  -moz-transition: opacity 2s ease-in-out;
  -ms-transition: opacity 2s ease-in-out;
  -o-transition: opacity 2s ease-in-out;
  opacity: 1;  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <!-- HTML here -->
      <div id="content" class="content">
        <div class="row">
          <div class="col-sm-12 col-md-4 col-lg-6">
            <div id="cardTerms">
              <div id="term-1">class</div>
              <div id="term-2">href</div>
              <div id="term-3">body</div>
              <div id="term-4">parent/child</div>
              <div id="term-5">comments</div>
              <div id="term-6">div</div>
            </div>            
          </div>
          <div class="col-sm-12 col-md-8 col-lg-6">
            <div id="cardDefs">
              <div class="card">
                <div class="card-body" id="def-1">
                  HTML elements can have one or more classes, separated by spaces. You can style elements using CSS by selecting them with their classes.                  
                </div>
              </div>
              <div class="card">
                <div class="card-body" id="def-2">
                  Links tell the browser where to go using an href attribute, which stores a URL.
                </div>
              </div>
              <div class="card">                
                <div class="card-body" id="def-3">
                  The body is the container for all of a page's content. Comes after the <span class="code">&lt;head&gt;</span> tag, within the overall <span class="code">&lt;html&gt;</span> tag.
                </div>
              </div>
              <div class="card">
                <div class="card-body" id="def-4">
                  An element that is an immediate descendent of another element or nested within another element is called a child. These become useful when using CSS child selectors and psuedo-elements.
                </div>
              </div>
              <div class="card">
                <div class="card-body" id="def-5">
                  HTML comments are sometimes used in code to explain parts of the markup. They are similar to comments in other languages. Users do not see comments in their browser.
                </div>
              </div>
              <div class="card">
                <div class="card-body" id="def-6">
                  A block level container (or 'division' of the web page) for content with no semantic meaning.
                </div>
              </div>
            </div>            
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
    
<!-- Modal -->
<div class="modal fade" id="matchModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Great Work!</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Awesome Job! Everything is matched up! Keep up the great work!
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-success btn-sm" data-dismiss="modal">Play Again</button>
      </div>
    </div>
  </div>
</div>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51901406

复制

相似问题

问如何使两个元素在拖放完成后褪色？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使两个元素在拖放完成后褪色？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使两个元素在拖放完成后褪色？
EN