jQuery droppable - 在放置时替换元素答案

【问题标题】：jQuery droppable - Replace element on dropjQuery droppable - 在放置时替换元素
【发布时间】：2021-06-05 20:51:52
【问题描述】：

我有 3 个可拖动图像组（组 1、组 2 和组 3）和 4 帧作为可放置区域。

我想用新的可放置元素替换框架中的任何现有元素。
在Reference DIV中，我需要写下drop image的值。

请问怎么做？

$("#countries li").draggable({
  helper: "clone",
  cursor: "move"
});
$("#cities li").draggable({
  helper: "clone",
  cursor: "move"
});
$("#zone li").draggable({
  helper: "clone",
  cursor: "move"
});

$("#frame1").droppable({
  drop: function(event, ui) {
    $(ui.draggable).clone().appendTo(this);
  }
});

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: block;
}

li {
  display: block;
  float: left;
}

.draggable {
  border: solid 1px #f1f1f1;
}

.frame {
  /* width:120px; */
  height: 120px;
  border: 1px solid black;
  background-color: #f1f1f1;
  float: left;
}

.modules {
  height: 70px;
}

<h3>AREA</h3>
<div class="modules" id="area">
  <div id="country">
    <ul id="countries">
      <li value="AT1">
        <img src="images/152C.png" class="draggable modules">
      </li>
      <li value="ER2">
        <img src="images/152K.png" class="draggable modules">
      </li>
      <li value="AS1">
        <img src="images/152R.png" class="draggable modules">
      </li>
    </ul>
  </div>
  <div id="city">
    <ul id="cities">
      <li value="AB3">
        <img src="images/100C.png" class="draggable modules">
      </li>
      <li value="CC2">
        <img src="images/100K.png" class="draggable modules">
      </li>
      <li value="99A">
        <img src="images/100R.png" class="draggable modules">
      </li>
    </ul>
  </div>
  <div id="zone">
    <ul id="zone">
      <li value="12A">
        <img src="images/110C.png" class="draggable modules">
      </li>
      <li value="C12">
        <img src="images/110K.png" class="draggable modules">
      </li>
      <li value="1W2">
        <img src="images/110R.png" class="draggable modules">
      </li>
    </ul>
  </div>
</div>

<div id="frames">
  <ol id="frame1" class="frame col-3">1</ol>
  <ol id="frame2" class="frame col-3">2</ol>
  <ol id="frame3" class="frame col-3">3</ol>
  <ol id="frame4" class="frame col-3">4</ol>
</div>
<div id="reference">Ref:</div>

你能帮忙吗？

【问题讨论】：

欢迎来到 Stack Overflow。请让我们知道您迄今为止尝试过的事情。您使用的是特定版本的 jQuery 或 jQuery UI 吗？

标签： jquery jquery-ui drag-and-drop jquery-ui-draggable

【解决方案1】：

考虑以下内容。

$(function() {
  $("#area li").draggable({
    helper: "clone",
    cursor: "move"
  });

  $("#frames > ol").droppable({
    drop: function(event, ui) {
      var v = ui.draggable.attr("value");
      $(this).html(ui.draggable.clone());
      $("#results").html(v);
    }
  });
});

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: block;
}

li {
  display: block;
  float: left;
}

.draggable {
  border: solid 1px #f1f1f1;
}

.frame {
  /* width:120px; */
  height: 120px;
  border: 1px solid black;
  background-color: #f1f1f1;
  float: left;
}

.modules {
  height: 70px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<h3>AREA</h3>
<div class="modules" id="area">
  <div id="country">
    <ul id="countries">
      <li value="AT1">
        <img src="images/152C.png" class="draggable modules">
      </li>
      <li value="ER2">
        <img src="images/152K.png" class="draggable modules">
      </li>
      <li value="AS1">
        <img src="images/152R.png" class="draggable modules">
      </li>
    </ul>
  </div>
  <div id="city">
    <ul id="cities">
      <li value="AB3">
        <img src="images/100C.png" class="draggable modules">
      </li>
      <li value="CC2">
        <img src="images/100K.png" class="draggable modules">
      </li>
      <li value="99A">
        <img src="images/100R.png" class="draggable modules">
      </li>
    </ul>
  </div>
  <div id="zone">
    <ul id="zone">
      <li value="12A">
        <img src="images/110C.png" class="draggable modules">
      </li>
      <li value="C12">
        <img src="images/110K.png" class="draggable modules">
      </li>
      <li value="1W2">
        <img src="images/110R.png" class="draggable modules">
      </li>
    </ul>
  </div>
</div>

<div id="frames">
  <ol id="frame1" class="frame col-3">1</ol>
  <ol id="frame2" class="frame col-3">2</ol>
  <ol id="frame3" class="frame col-3">3</ol>
  <ol id="frame4" class="frame col-3">4</ol>
</div>
<div id="reference">Ref: <span id="results"></span></div>

使用.html()我们可以替换内容。然后我们可以获取元素的属性来获取value。我建议将其更改为 data-value 属性，但这取决于您。

【讨论】：

【解决方案2】：

非常感谢 Twisty，它工作得很好！！！

我还有一个问题：我为每个帧显示的每个图像组有 3 个选项列表，一旦我将组 1 中的图像放到其中一个帧上，选项列表 1 就会出现，而列表 2 和 3 会隐藏

注意：默认情况下，所有列表都使用“display:none”隐藏，将使用 jquery 显示。

请问怎么做？

$(document).ready(function() {

$("#modules li").draggable({
    helper: "clone",
    cursor: "move",
    opacity: 0.35,
    revert: 'invalid'
  });
  
  $("#frames > ol").droppable({
    drop: function(event, ui) {
      var v = ui.draggable.attr("value");
      $(this).html(ui.draggable.clone());
      $("#results").html(v);

/* I need to get dropped fame number to hide or show list that much */
  if(x === n) {
      $("#x-ol1").show();
      $("#x-ol2").hide();
      $("#x-ol3").hide();              
  } else if(v === 11) {
      $("#x-ol1").hide();
      $("#x-ol2").show();
      $("#x-ol3").hide();                  
  } else if(v === 12) { 
      $("#x-ol1").hide();
      $("#x-ol2").hide();
      $("#x-ol3").show();                
  } else {
      $("#x-ol1").hide();
      $("#x-ol2").hide();
      $("#x-ol3").hide();                 
  }
    }
  });
  
  })

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: block;
  }
  
  li {
    display: block;
    float:left;
  }
  
  .draggable {
    border: solid 1px #f1f1f1;
  }
  
  .frame {
   width:100px; 
    height:100px;
    border: 1px solid black;
    background-color: #f1f1f1;
    float: left;
  }

  .modules {
      /* width: 70px; */
      height: 70px;
  }


.col3 {
width:23%;
display:inline-block;
}
#a-ol1, #a-ol2, #a-ol3,
#b-ol1, #b-ol2, #b-ol3,
#c-ol1, #c-ol2, #c-ol3,
#d-ol1, #d-ol2, #d-ol3 {
    /* display: none; */
}

<div class="frames">
    <div class="row" id="frames">
        <ol id="frame1" class="frame col-3" value=1>1</ol>
        <ol id="frame2" class="frame col-3" value=2>2</ol>
        <ol id="frame3" class="frame col-3" value=3>3</ol>
        <ol id="frame4" class="frame col-3" value=4>4</ol>
    </div>  
    <div class="row">   
        <!-- GROUP LIST 1 -->          
        <div id="group-list-a" class="group-list-a col3">
            <select name="a-ol1" id="a-ol1">
                <option value="a-optionlist1-1">A Option List 1 (1)</option>
                <option value="a-optionlist1-2">A Option List 1 (2)</option>
                <option value="a-optionlist1-3">A Option List 1 (3)</option>
            </select>        
            <select name="a-ol2" id="a-ol2">
                <option value="a-optionlist2-1">A Option List 2 (1)</option>
                <option value="a-optionlist2-2">A Option List 2 (2)</option>
                <option value="a-optionlist2-3">A Option List 2 (3)</option>
            </select>                        
            <select name="a-ol3" id="a-ol3">
                <option value="a-optionlist3-1">A Option List 3 (1)</option>
                <option value="a-optionlist3-2">A Option List 3 (2)</option>
                <option value="a-optionlist3-3">A Option List 3 (3)</option>
            </select>                            
        </div>
        <!-- GROUP LIST 2 --> 
        <div id="group-list-b" class="group-list-b col3">
            <select name="b-ol1" id="b-ol1">
                <option value="b-optionlist1-1">B Option List 1 (1)</option>
                <option value="b-optionlist1-2">B Option List 1 (2)</option>
                <option value="b-optionlist1-3">B Option List 1 (3)</option>
            </select>                         
            <select name="b-ol2" id="b-ol2">
                <option value="b-optionlist2-1">B Option List 2 (1)</option>
                <option value="b-optionlist2-2">B Option List 2 (2)</option>
                <option value="b-optionlist2-3">B Option List 2 (3)</option>
            </select>                        
            <select name="b-ol3" id="b-ol3">
                <option value="b-optionlist3-1">B Option List 3 (1)</option>
                <option value="b-optionlist3-2">B Option List 3 (2)</option>
                <option value="b-optionlist3-3">B Option List 3 (3)</option>
            </select>                            
        </div>
        <!-- GROUP LIST 3 --> 
        <div id="group-list-c" class="group-list-c col3">
            <select name="c-ol1" id="b-ol1">
                <option value="c-optionlist1-1">C Option List 1 (1)</option>
                <option value="c-optionlist1-2">C Option List 1 (2)</option>
                <option value="c-optionlist1-3">C Option List 1 (3)</option>
            </select>                         
            <select name="c-ol2" id="c-ol2">
                <option value="c-optionlist2-1">C Option List 2 (1)</option>
                <option value="c-optionlist2-2">C Option List 2 (2)</option>
                <option value="c-optionlist2-3">C Option List 2 (3)</option>
            </select>                        
            <select name="c-ol3" id="c-ol3">
                <option value="c-optionlist3-1">C Option List 3 (1)</option>
                <option value="c-optionlist3-2">C Option List 3 (2)</option>
                <option value="c-optionlist3-3">C Option List 3 (3)</option>
            </select>                            
        </div>
        <!-- GROUP LIST 4 --> 
        <div id="group-list-d" class="group-list-d col3">
            <select name="d-ol1" id="d-ol1">
                <option value="d-optionlist1-1">D Option List 1 (1)</option>
                <option value="d-optionlist1-2">D Option List 1 (2)</option>
                <option value="d-optionlist1-3">D Option List 1 (3)</option>
            </select>                         
            <select name="d-ol2" id="d-ol2">
                <option value="d-optionlist2-1">D Option List 2 (1)</option>
                <option value="d-optionlist2-2">D Option List 2 (2)</option>
                <option value="d-optionlist2-3">D Option List 2 (3)</option>
            </select>                        
            <select name="d-ol3" id="d-ol3">
                <option value="d-optionlist3-1">D Option List 3 (1)</option>
                <option value="d-optionlist3-2">D Option List 3 (2)</option>
                <option value="d-optionlist3-3">D Option List 3 (3)</option>
            </select>                            
        </div>                
    </div>                                           
</div>

Image illustrate Drag 1 Drop with Option list

enter code here

【讨论】：