javascript - 使用接受函数验证 Draggable Customer

Question

我有疑问这对于我的可拖放模块是否可能，我这里有类

1. stackDrop1(在厨房里)
2. stackDrop2(在路上)
3. stackDrop3(已完成)

如果客户乔治参加了路上类(class)，厨房类(class)将不允许/接受放弃该客户乔治再次走向那个盒子。它将显示警报，表明客户已进入第 2 步。

需要验证的场景:如果客户 George 已经在类 stackDrop2 中，则类 stackDrop1 停止接受客户 George。

我的 Jquery 代码:

    $(".drag-wrapper").draggable({
    appendTo: "body",
    cursor: "move",
    helper: 'clone',

});

$("#launchPad").droppable({
    tolerance: "intersect",
    accept: ".drag-wrapper",
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {
        // $("#launchPad").append($(ui.draggable));
    }
});

$(".stackDrop1").droppable({
    tolerance: "intersect",
    accept: ".drag-wrapper",
    revert: 'invalid',
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {        
        $(this).append($(ui.draggable));
        alert('In the kitchen');
    }
});

$(".stackDrop2").droppable({
    tolerance: "intersect",
    accept: ".drag-wrapper",

    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {        
        $(this).append($(ui.draggable));
        alert('On the road');
    }
});

$(".stackDrop3").droppable({
    tolerance: "intersect",
    accept: ".drag-wrapper",

    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {        
        $(this).append($(ui.draggable));
        alert('Completed');
    }
});

我的 HTML 代码:

<div class="jumbotron" style="background-color:white;">
    <div class="row">
        <div class="col-md-3">
            <div id="launchPad">
                <div class="stackHdr" style="background: linear-gradient(-25deg, #00e4d0, #5983e8); color:white; text-align: center;">
                    <text>Open Orders</text>
                </div>    
                @foreach($customer_orders_details as $transac_details)
                    <div class="drag-wrapper">
                        <div class="card">
                            <div class="card-body" style="font-weight: bold; text-align: center;">
                                <h5 class="card-title" style="text-align: center;">
                                    <i class="far fa-user-circle" style="font-size:30px;"></i>
                                    <br><br>
                                    <h6 class="card-subtitle mb-2 text-muted" style="font-weight: 300; color:black !important; font-family: 'Open Sans';">OR # {{$transac_details->or_number}}</h6>
                                    <h6 class="card-subtitle mb-2 text-muted" style="font-weight: bold; color:black !important;">Customer: {{$transac_details->customer_name}}</h6><br>
                                    <h6 class="card-subtitle mb-2 text-muted" style="font-weight: 300;">Address: {{$transac_details->order_ship_address}}</h6>
                                    <h6 class="card-subtitle mb-2 text-muted" style="font-weight: 300;">Contact #: {{$transac_details->customer_number}}</h6>
                                    <p class="card-text">Total:${{$transac_details->amount}}</p>

                                    <a href="#" class="card-link btn btn-primary">Assign</a>
                                    <a href="#" class="card-link btn btn-warning" id="gather_customer_order" data-order-id='{{$transac_details->order_id}}' data-customer-id='{{$transac_details->customer_id}}' style="color:white;" data-toggle="modal" data-target="#customer_detail_delivery">Details</a>
                                </h5>
                            </div>
                        </div>
                    </div>
                    <br>
                @endforeach
            </div>
        </div>
        <div class="col-md-3">
            <div id="dropZone">
                <div class="stack"  style="width:231px;">
                    <div class="stackHdr" style="background: linear-gradient(-10deg, #00e4d0, #5983e8); color:white;  text-align: center;">
                        <text>In the Kitchen</text>
                    </div>
                    <center>
                        <div class="stackDrop1" style="">

                        </div>
                    </center>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div id="dropZone">
                <div class="stack"  style="width:231px;">
                    <div class="stackHdr" style="background: linear-gradient(-10deg, #00e4d0, #5983e8); color:white;  text-align: center;">
                        <text>On the Road</text>
                    </div>
                    <center>
                        <div class="stackDrop2" style="">

                        </div>
                    </center>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div id="dropZone">
                <div class="stack"  style="width:231px;">
                    <div class="stackHdr" style="background: linear-gradient(-10deg, #00e4d0, #5983e8); color:white;  text-align: center;">
                        <text>Completed</text>
                    </div>
                    <center>
                        <div class="stackDrop3" style="">

                        </div>
                    </center>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

您可以调整可拖动对象的类，以便每个可放置对象仅接受特定的类。考虑以下代码。

$(function() {
  $(".drag-wrapper").draggable({
    appendTo: "body",
    cursor: "move",
    helper: 'clone'
  });

  $("#launchPad").droppable({
    tolerance: "intersect",
    accept: ".drag-wrapper",
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {
      // $("#launchPad").append($(ui.draggable));
    }
  });

  $(".stackDrop1").droppable({
    tolerance: "intersect",
    accept: ".from-launch",
    revert: 'invalid',
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {
      ui.draggable.removeClass("from-launch").addClass("from-kitchen");
      $(this).append($(ui.draggable));
      console.log('In the kitchen');
    }
  });

  $(".stackDrop2").droppable({
    tolerance: "intersect",
    accept: ".from-kitchen",
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {
      $(this).append($(ui.draggable));
      console.log('On the road');
    }
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="jumbotron" style="background-color:white;">
  <div class="row">
    <div class="col-md-3">
      <div id="launchPad">
        <div class="stackHdr" style="background: linear-gradient(-25deg, #00e4d0, #5983e8); color:white; text-align: center;">
          <text>Open Orders</text>
        </div>
        <div class="drag-wrapper from-launch">
          <div class="card">
            <div class="card-body" style="font-weight: bold; text-align: center;">
              <h5 class="card-title" style="text-align: center;">
                <i class="far fa-user-circle" style="font-size:30px;"></i>
                <br><br>
                <h6 class="card-subtitle mb-2 text-muted" style="font-weight: 300; color:black !important; font-family: 'Open Sans';">OR # 1001</h6>
                <h6 class="card-subtitle mb-2 text-muted" style="font-weight: bold; color:black !important;">Customer: George</h6><br>
                <h6 class="card-subtitle mb-2 text-muted" style="font-weight: 300;">Address: 123 Main St, City</h6>
                <h6 class="card-subtitle mb-2 text-muted" style="font-weight: 300;">Contact #: (415) 555-1212</h6>
                <p class="card-text">Total:$0.00</p>

                <a href="#" class="card-link btn btn-primary">Assign</a>
                <a href="#" class="card-link btn btn-warning" id="gather_customer_order" data-order-id='OR-1001' data-customer-id='C-1' style="color:white;" data-toggle="modal" data-target="#customer_detail_delivery">Details</a>
              </h5>
            </div>
          </div>
        </div>
        <br>
      </div>
    </div>
    <div class="col-md-3">
      <div id="dropZone">
        <div class="stack" style="width:231px;">
          <div class="stackHdr" style="background: linear-gradient(-10deg, #00e4d0, #5983e8); color:white;  text-align: center;">
            <text>In the Kitchen</text>
          </div>
          <center>
            <div class="stackDrop1" style="height: 400px">
            </div>
          </center>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div id="dropZone">
        <div class="stack" style="width:231px;">
          <div class="stackHdr" style="background: linear-gradient(-10deg, #00e4d0, #5983e8); color:white;  text-align: center;">
            <text>On the Road</text>
          </div>
          <center>
            <div class="stackDrop2" style="height: 400px;">

            </div>
          </center>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div id="dropZone">
        <div class="stack" style="width:231px;">
          <div class="stackHdr" style="background: linear-gradient(-10deg, #00e4d0, #5983e8); color:white;  text-align: center;">
            <text>Completed</text>
          </div>
          <center>
            <div class="stackDrop3" style="height: 400px;">

            </div>
          </center>
        </div>
      </div>
    </div>
  </div>
</div>

当用户将项目从一个地方移动到另一个地方时，类会添加到项目中或从项目中删除。然后，每个可转换元素都可以接受特定类别的元素。这可以防止用户将项目移动到错误的位置。

希望有帮助。