Php 为什么此代码在wordpress页面中不起作用？

嗨，这是我的代码，我正在编写wordpress文本编辑器。当用JSFIDLE编写代码时，代码可以完美地工作，但在wordpress中无法工作

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<div id="box"></div>
<div id="target"></div>
<style>
#box{ 
height: 20px;
width:20px; 
background-color:red;
}
#target{ 
height: 50px;
width: 50px; 
border: 1px solid red;
float:right;
}
#target.twinkle{ 

border: 5px solid green;
}
</style>


<script>
$(document).ready(function(){
$("#box").draggable();
$("#target").droppable({
 drop: function( event, ui ) {
   $( this )
      .addClass( "twinkle" ).html("dropped");

  }
});
});
</script> 

#框{
高度：20px；
宽度：20px；
背景色：红色；
}
#目标{
高度：50px；
宽度：50px；
边框：1px纯红；
浮动：对；
}
#目标。闪烁{
边框：5px纯绿色；
}
$（文档）.ready（函数（）{
$（“#盒”）.draggable（）；
$（“#目标”）。可拖放({
drop：函数（事件、用户界面）{
$（本）
.addClass（“闪烁”）.html（“删除”）；
}
});
});

DragTable可以工作，但在目标上丢弃时，它不会添加类

---

提前感谢。

尝试将

$

替换为

jQuery

。您通常必须在wordpress中使用

$

来避免与其他插件/主题/etc发生冲突

<script>
jQuery(document).ready(function(){
jQuery("#box").draggable();
jQuery("#target").droppable({
 drop: function( event, ui ) {
   jQuery( this )
      .addClass( "twinkle" ).html("dropped");

  }
});
});
</script> 

jQuery（文档）.ready（函数（）{
jQuery（“#box”）.draggable（）；
jQuery（“#目标”）.dropable({
drop：函数（事件、用户界面）{
jQuery（这个）
.addClass（“闪烁”）.html（“删除”）；
}
});
});

您通常无法在WordPress编辑器中添加JavaScript，因为它会去除JavaScript

---

但也有一些选择。抄本上有一篇文章。还可以使用短代码和自定义字段，如中所述

是否要将类添加到下拉列表中？因为这就是你的代码所做的。看，你希望发生什么？为什么你要使用这么旧的jQuery版本？@ArunPJohny:用wordpress编辑器编写的代码不起作用。#框是可拖动的，但当它落在目标上时，目标不会改变。@RRikesh：用最新版本尝试过。仍然不起作用。