SortableJS 위치를 객체에 어떻게 저장할 수 있습니까? [복제]
Nov 20 2020
사용자가 좋아하는 이미지에서 가장 적은 이미지까지 순위를 매기는 설문지를 만들려고합니다. 이미지를 드래그 앤 드롭 할 수 있도록 SortableJS를 사용하고 있습니다. 현재 console.log에 이미지 위치가 있습니다.
그러나 나는 그것을 사전에 밀어 넣어 다음과 같이 형식화 할 수 있습니다 {0 : image2, 1:image1, 2:image3}. 이렇게하면 각 인덱스에 어떤 이미지가 있는지 확인할 수 있으므로 사용자가 제출을 클릭하면 3 개의 이미지를 더로드하여 순위를 지정할 수 있습니다.
누구든지이 작업을 수행하는 방법을 도울 수 있습니까? 사전이 작동하지 않고 위치가 현재 배열에 있습니다.
var ranked = {}
window.sessionStorage.setItem("ranked", JSON.stringify(ranked));
$( function() { $( "#sortable" ).sortable();
$( "#sortable" ).disableSelection(); } ); $(function () {
$("#items").sortable({ start: function (event, ui) { ui.item.toggleClass("highlight"); }, stop: function (event, ui) { ui.item.toggleClass("highlight"); var order = $(this).sortable('toArray');
var positions = order.join(';');
var rank = positions;
console.log(rank);
var result = $(this).sortable('toArray', {rank: 'value'}); console.log(result) } }); $("#items").disableSelection();
}); <html>
<header>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-sortablejs@latest/jquery-sortable.js"></script>
<script type="text/javascript" src="/Users/rankWebsite/js/main.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="/Users/rankWebsite/css/mainstyle.css">
</header>
<body class=body>
<h1> Rank Images</h1>
<hr>
<div class="images">
<div id="items">
<img src="/Users/rankWebsite/images/image_1.jpg" id ="image1" style="width:150px;height:150px" >
<img src="/Users/rankWebsite/images/image_2.jpg" id="image2" style="width:150px;height:150px">
<img src="/Users/rankWebsite/images/image_3.jpg" id="image3" style="width:150px;height:150px">
</div>
</div>
<div class="button">
<button type="submit" onclick="submit()">Submit</button>
</div>
</body>
</html>답변
1 TheBombSquad Nov 23 2020 at 22:59
확인하기 위해, 기본적으로 이미지를 배열로 정렬하는 것뿐입니까?
//i just gave the example of how to store the images as the data you wanted
function getArrayOfPictures(){
var items=$('#items')[0].childNodes //change this to wherever the list of images are stored
return Object.keys(items) //returns an array of each KEY of ITEMS
.filter(a=>items[a].tagName=="IMG") //returns ONLY the image elements
.map(a=>{
var arr=items[a].src.split('/')
return arr[arr.length-1]
}) //formats it to have just the name of the img after the last '/'
//stores data how you would like it(and when the order changes everytime you run this function it would return the ordering of it as well)
}
var itemList=getArrayOfPictures()
console.log(itemList)
var itemPointer=Object.keys(items).filter(a=>items[a].tagName=="IMG") //points to the actual image elements for more advanced things you might want to do<html>
<header>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
</header>
<body class=body>
<h1> Rank Images</h1>
<hr>
<div class="images">
<div id="items">
<img src="https://cdn.akc.org/content/hero/puppy_pictures_header.jpg" id ="image1" style="width:150px;height:150px" >
<img src="https://www.firstforwomen.com/wp-content/uploads/sites/2/2019/07/puppy-eyes.jpg?w=715" id="image2" style="width:150px;height:150px">
<img src="https://parade.com/wp-content/uploads/2018/03/golden-puppy-life-national-geographic-ftr.jpg" id="image3" style="width:150px;height:150px">
</div>
</div>
<div class="button">
<button type="submit" onclick="submit()">Submit</button>
</div>
</body>
</html>