jQuery droppable - 在放置时替换元素

Posted 2023-05-08

技术标签:

【中文标题】jQuery droppable - 在放置时替换元素【英文标题】：jQuery droppable - Replace element on drop 【发布时间】：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 吗？ 【参考方案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

【讨论】：

以上是关于jQuery droppable - 在放置时替换元素的主要内容，如果未能解决你的问题，请参考以下文章

jQuery：可在 Resizable Droppable 上拖动：项目在放置后消失

jQuery UI (Droppable)：如果 droppable 具有相对/绝对的 css 位置，则可拖动元素不会放置在鼠标指针处

将类添加到jQuery draggable和droppable中的可放置项

jQuery draggable : 只能在一个 droppable 上拖动

JQuery EasyUI---Droppable( 放置)

02 Jquery UI Droppable 放置插件