ใ“ใฎใƒšใƒผใ‚ธใฏใ‚ณใƒŸใƒฅใƒ‹ใƒ†ใ‚ฃใƒผใฎๅฐฝๅŠ›ใง่‹ฑ่ชžใ‹ใ‚‰็ฟป่จณใ•ใ‚Œใพใ—ใŸใ€‚MDN Web Docs ใ‚ณใƒŸใƒฅใƒ‹ใƒ†ใ‚ฃใƒผใซใคใ„ใฆใ‚‚ใฃใจ็Ÿฅใ‚Šใ€ไปฒ้–“ใซใชใ‚‹ใซใฏใ“ใกใ‚‰ใ‹ใ‚‰ใ€‚

View in English Always switch to English

HTML draggable ใ‚ฐใƒญใƒผใƒใƒซๅฑžๆ€ง

draggable ใ‚ฐใƒญใƒผใƒใƒซๅฑžๆ€ง ใฏๅˆ—ๆŒ™ๅž‹ๅฑžๆ€งใงใ€่ฆ็ด ใŒใƒ–ใƒฉใ‚ฆใ‚ถใƒผใฎๆ—ขๅฎšใฎๅ‹•ไฝœใจ HTML ใƒ‰ใƒฉใƒƒใ‚ฐ๏ผ†ใƒ‰ใƒญใƒƒใƒ— APIใฎใฉใกใ‚‰ใฎๅ‹•ไฝœใงใƒ‰ใƒฉใƒƒใ‚ฐใงใใ‚‹ใ‹ใ‚’็คบใ—ใพใ™ใ€‚

draggable ๅฑžๆ€งใฏใ€ๅŽณๅฏ†ใซใฏ HTML ๅๅ‰็ฉบ้–“ใซๅฑžใ™ใ‚‹่ฆ็ด ใซ้ฉ็”จใ™ใ‚‹ใ“ใจใŒใงใใ€ใ“ใ‚Œใฏ SVG ใซใฏ้ฉ็”จใงใใชใ„ใ“ใจใ‚’ๆ„ๅ‘ณใ—ใพใ™ใ€‚ ๅๅ‰็ฉบ้–“ๅฎฃ่จ€ใŒใฉใฎใ‚ˆใ†ใชใ‚‚ใฎใงใ€ไฝ•ใ‚’ใ™ใ‚‹ใฎใ‹ใซใคใ„ใฆใฏใ€ๅๅ‰็ฉบ้–“ใฎ้€Ÿไฟฎ่ฌ›ๅบงใ‚’ๅ‚็…งใ—ใฆใใ ใ•ใ„ใ€‚

draggable ใฏไปฅไธ‹ใฎๅ€คใ‚’ๅ–ใ‚‹ใ“ใจใŒใงใใพใ™ใ€‚

  • true: ่ฆ็ด ใŒใƒ‰ใƒฉใƒƒใ‚ฐๅฏ่ƒฝใงใ‚ใ‚‹ใ“ใจใ‚’็คบใ—ใพใ™ใ€‚
  • false: ่ฆ็ด ใฏใƒ‰ใƒฉใƒƒใ‚ฐไธๅฏใงใ‚ใ‚‹ใ“ใจใ‚’็คบใ—ใพใ™ใ€‚

่ญฆๅ‘Š: ใ“ใฎๅฑžๆ€งใฏ ๅˆ—ๆŒ™ๅž‹ ใงใ‚ใ‚Šใ€่ซ–็†ๅฑžๆ€ง ใงใฏใ‚ใ‚Šใพใ›ใ‚“ใ€‚ true ใพใŸใฏ false ใฎๅ€คใŒๅฟ…้ ˆใงใ‚ใ‚Šใ€ <img draggable> ใฎใ‚ˆใ†ใช็œ็•ฅๅฝขใฏ่ชใ‚ใ‚‰ใ‚Œใพใ›ใ‚“ใ€‚ๆญฃใ—ใ„ไฝฟ็”จๆณ•ใฏ <img draggable="true"> ใงใ™ใ€‚

ใ“ใฎๅฑžๆ€งใŒ่จญๅฎšใ•ใ‚Œใชใ‹ใฃใŸๅ ดๅˆใฎๆ—ขๅฎšๅ€คใฏ auto ใงใ‚ใ‚Šใ€ใƒ–ใƒฉใ‚ฆใ‚ถใƒผใฎๆ—ขๅฎšใฎใƒ‰ใƒฉใƒƒใ‚ฐๅ‹•ไฝœใงใ‚ใ‚‹ใ“ใจใ‚’ๆ„ๅ‘ณใ—ใพใ™ใ€‚ใƒ†ใ‚ญใ‚นใƒˆใฎ้ธๆŠž็ฏ„ๅ›ฒใ€็”ปๅƒใ€ใƒชใƒณใ‚ฏใฎใฟใŒใƒ‰ใƒฉใƒƒใ‚ฐๅฏ่ƒฝใงใ™ใ€‚ไป–ใฎ่ฆ็ด ใงใƒ‰ใƒฉใƒƒใ‚ฐ๏ผ†ใƒ‰ใƒญใƒƒใƒ—ใงใใ‚‹ใ‚ˆใ†ใซใ™ใ‚‹ใŸใ‚ใซใฏ ondragstart ใ‚คใƒ™ใƒณใƒˆใ‚’่จญๅฎšใ™ใ‚‹ๅฟ…่ฆใŒใ‚ใ‚Šใพใ™๏ผˆใ“ใกใ‚‰ใฎๅŒ…ๆ‹ฌ็š„ใชใ‚ตใƒณใƒ—ใƒซใซใ‚ใ‚‹ใ‚ˆใ†ใซ๏ผ‰ใ€‚