是否可以前后拖動Webkit選框？

Question

我運行了自動收錄機，但有時文本可能會很長。 我已經修改了原始的Webkit代碼，以允許用戶將鼠標懸停在代碼上，但我希望用戶能夠來回拖動代碼。

我不太擅長jQuery，所以有沒有辦法使用JavaScript / CSS？

 .marquee { width: 800px; max-width: 100%; height: 25px; margin: 0 auto; white-space: nowrap; overflow: hidden; border: 1px solid #F00; background: GhostWhite; color: #000; font-size: 20px; } .marquee span { display: inline-block; padding-left: 100%; animation: marquee 20s linear infinite; } .marquee span:hover { -moz-animation-play-state: paused; -webkit-animation-play-state: paused; animation-play-state: paused; } /* Make it move */ @keyframes marquee { 0% {transform: translate(0, 0)} 100% {transform: translate(-100%, 0)} } 

 <p class="marquee"><span>Just some dummy text</span></p> 

Answer 1

如果您願意使用庫，則jQuery UI具有內置的拖動功能供您使用。

您可以在此處下載自定義版本。

 $("#drag-me").draggable({ axis: "x" }); 

 .marquee { width: 800px; max-width: 100%; height: 25px; margin: 0 auto; white-space: nowrap; overflow: hidden; border: 1px solid #F00; background: GhostWhite; color: #000; font-size: 20px; } .marquee span { display: inline-block; padding-left: 100%; animation: marquee 20s linear infinite; cursor: default; } .marquee span:hover { -moz-animation-play-state: paused; -webkit-animation-play-state: paused; animation-play-state: paused; } /* Make it move */ @keyframes marquee { 0% { transform: translate(0, 0) } 100% { transform: translate(-100%, 0) } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> <p class="marquee"><span id="drag-me">Just some dummy text</span></p> 

Answer 2

I am Addting @-webkit-keyframes  safari and chrome browser compatible   /* Safari 4.0 - 8.0 */ 

   .marquee {
      width: 800px;
      max-width: 100%;
      height: 25px;
      margin: 0 auto;
      white-space: nowrap;
      overflow: hidden;
      border: 1px solid #F00;
      background: GhostWhite;
      color: #000;
      font-size: 20px;
    }

    .marquee span {
      display: inline-block;
      padding-left: 100%;
      animation: marquee 20s linear infinite;
    }

    .marquee span:hover {
      -moz-animation-play-state: paused;
      -webkit-animation-play-state: paused;
      animation-play-state: paused;
    }




   /* Standard syntax */
    @keyframes marquee {
      0%   {transform: translate(0, 0)}
      100% {transform: translate(-100%, 0)}
    }


    /* Safari 4.0 - 8.0 */
     @-webkit-keyframes marquee {
      0%   {transform: translate(0, 0)}
      100% {transform: translate(-100%, 0)}
    }


    <p class="marquee"><span>css marquee code with webkit browser compatible</span></p>