我正在尝试在我的网页上动态地上下移动元素。我怎么做？

Question

我有一个网页，其中包含播放音乐的 iframe soundcloud 音乐 "boxes" 列表，我想在这些 iframe 的侧面添加按钮，以根据人们对它们的投票上下移动框.有点像 reddit 上的东西。（我这样做是为了好玩，无意发布）我尝试绝对定位 iframe，然后使用 javascript 向上或向下移动，但意识到尝试编码将是一场灾难。解决这个问题的最佳方法是什么？我对网络开发比较陌生。

（我使用 bootstrap 来设置网页样式）

这是 html 文档的正文：

<body>
<div class="page-header" class="stayPut"><div class="stayPut" id="Header"><img src="logo.png" ALT="Hamiltron" WIDTH=300 HEIGHT=61/></div></div>
<div class="container">
    <div class="jumbotron"><h1 style="text-align: center; color: white;">An Ultimate Music List.</h1></div>
    <div class="jumbotron">

            <iframe  id="box1" width="100%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/113414910&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>

            <iframe id="box2" width="100%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/180568985&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>

    <iframe id="box3" width="100%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/161660686&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>

    </div>
</div>

<script>
document.getElementById("box1").style["position"]="absolute";
document.getElementById("box1").style["top"] = "20px";
document.getElementById("box1").style["width"] = "75%";

</script>

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

Answer 1

我很乐意提供帮助，所以我会向您展示我最擅长的方式。您将需要启用投票和数据库，即使只是一个 1 table 数据库，其值如

ID | VoteCount | TRACKID
0    3           180568985

如果我在你那里，我会先处理这个问题，然后分配按钮以增加数据库中的投票数。我会用 Ajax to poll a PHP file to connect to the database 这样做，这样您的页面就不会在每次投票后重新加载！

然后您将需要使用 Javascript 或在轮询时按顺序从数据库中获取项目。我已经创建了一个示例来为您显示它们：

Working Example of Following Code | JSFiddle.com

//This is a JSON Object that can be assessed like dataFromDatabaseExample[2].vote = 100
//NOTE THESE ARE NOT IN THE RIGHT ORDER ;)
var dataFromDatabaseExample = [{id: 0, vote: 43, songID: 113414910},
                               {id: 1, vote: 5, songID: 180568985},
                               {id: 2, vote: 100, songID: 161660686}];

//Creates an event listener to listen for if someone clicks the refresh button
$('#refresh').on('click',function(){
      refreshData();
});

//Function that holds main data that can be run whenever
function refreshData(){

   //Clears the bit of the page where the votes are going to be ie RESET
    $('#soundCloudItems').html("");

    //Sort the values to be in order using our custom sorting function compareVotes
     var songs = dataFromDatabaseExample.sort(  compareVotes  );

    //For every item we got
    for(var i=0;i<songs.length;i++){
        //Title it (Optional but shows vote count)
        $('#soundCloudItems').append("Votes: "+songs[i].vote+"<br>");
        //Display the soundcloud box
        $('#soundCloudItems').append(getSongCode(songs[i].id,songs[i].vote,songs[i].songID));
    }
}

//Run on Load to display some data
refreshData();


//TWO HELPER FUNCTIONS ///////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////


//Compares two items from the array, for the vote count
function compareVotes(a,b) {
  if (a.vote > b.vote)
     return -1;
  if (a.vote < b.vote)
    return 1;
  return 0;
}

//Just returns all the bulky code in a nice form as a piece of HTML/Text
function getSongCode(id,vote,SongId){
 return '<iframe data-voteCount="'+id+'" id="soundcloud'+id+'" width="100%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/'+SongId+'&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>';
}

我正在尝试在我的网页上动态地上下移动元素。我怎么做？

I'm trying to dynamically move elements up and down on my webpage. How do I do that?

html

javascript

css

iframe

webpage