问题描述
我有 3 个可拖动图像组(group1、group2 和 group3),以及 4 个框架作为可放置区域。
- 我想用新的可放置元素替换框架中的任何现有元素。
- 在参考 DIV 中,我需要写下丢弃图像的值。
请问怎么做?
$("#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>
你能帮忙吗?
解决方法
考虑以下事项。
$(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
属性,但这取决于您。
非常感谢 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